滚动

Question

您好我正在创建一个页面网站，所以我需要它，例如，如果section2出现在视口中，则添加类激活以与href =“section2”链接。

示例，我需要one page website

$(document).ready(function () {
    $(".links a").click(function (e) {
        if (this.getAttribute("href").charAt(0) == "#") {
            e.preventDefault();
            $(this).addClass("active").siblings().removeClass("active");
            $("html, body").stop();
            $("html, body").animate({
                scrollTop: $($(this).attr("href")).offset().top
            }, 1400)
        }
        else {
            $($(this)).attr("target", "_blank")
        }
    })
})

.links{
  width:600px;
  position:fixed;
  top:0;
  padding:20px;
}
.links a{
  display:inline-block;
  padding:10px 20px;
  border:1px solid #02e62a;
  color:#02e62a;
  text-decoration:none;
}
.links a:hover, .links a.active{
    color:#fe0101;
    border-color:#fe0101;
}
.section{
  width:400px;
  height:200px;
  margin:300px auto 600px;
  background-color:#0094ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="links">
        <a href="#home">Section 1</a>
        <a href="#about">Section 2</a>
        <a href="http://google.com" target="_blank">External Link</a>
        <a href="#services">Section 3</a>
        <a href="#contact">Section 4</a>
    </div>
    <div id="home" class="section"></div>
    <div id="about" class="section"></div>
    <div id="services" class="section"></div>
    <div id="contact" class="section"></div>

注意：请不要建议我使用任何插件。

Answer 1

试试这个，我认为它可以为您提供所需的解决方案。

$(document).on("scroll", function() {
  $('div[id^="section"]').each(function() {
  var id = $(this).attr("id");
    if (isScrolledIntoView("#" + id)) {
       $('a[href="#'+id+'"]').addClass("active").siblings().removeClass("active");
    }
  })
})

注意当你在这里使用鼠标滚动时，它似乎有点麻烦，所以通过拉动右边的滚动条来测试它。不知道为什么，但我现在试图解决它。

更新问题似乎是代码段窗口太小，如果您在full page中运行示例，那么它可以正常工作

$(document).ready(function() {
  $(".links a").click(function(e) {
    if (this.getAttribute("href").charAt(0) == "#") {
      e.preventDefault();
      $(this).addClass("active").siblings().removeClass("active");
      $("html, body").stop();
      $("html, body").animate({
        scrollTop: $($(this).attr("href")).offset().top
      }, 1400)
    } else {
      $($(this)).attr("target", "_blank")
    }
  })
})

$(document).on("scroll", function() {
  $('div.section').each(function() {
  var id = $(this).attr("id");
    if (isScrolledIntoView("#" + id)) {
      $('a[href="#'+id+'"]').addClass("active").siblings().removeClass("active");
    }
  })
})

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

.links {
  width: 600px;
  position: fixed;
  top: 0;
  padding: 20px;
}

.links a {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #02e62a;
  color: #02e62a;
  text-decoration: none;
}

.links a:hover,
.links a.active {
  color: #fe0101;
  border-color: #fe0101;
}

.section {
  width: 400px;
  height: 200px;
  margin: 300px auto 600px;
  background-color: #0094ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="links">
  <a href="#Home">Home</a>
  <a href="#About">About</a>
  <a href="http://google.com" target="_blank">External Link</a>
  <a href="#Contact">Contact</a>
  <a href="#Blog">Blog</a>
</div>
<div id="Home" class="section"></div>
<div id="About" class="section"></div>
<div id="Contact" class="section"></div>
<div id="Blog" class="section"></div>