blocks|key|389573|text|它是由容器(通常是binding+to+the+scroll+event+)的窗口来完成的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|389574|快速示例：|389575|//+Cache+selectors
var+topMenu+=+$("#top-menu"),
++++topMenuHeight+=+topMenu.outerHeight()%2B15,
++++//+All+list+items
++++menuItems+=+topMenu.find("a"),
++++//+Anchors+corresponding+to+menu+items
++++scrollItems+=+menuItems.map(function(){
++++++var+item+=+$($(this).attr("href"));
++++++if+(item.length)+{+return+item;+}
++++});

//+Bind+to+scroll
$(window).scroll(function(){
+++//+Get+container+scroll+position
+++var+fromTop+=+$(this).scrollTop()%2BtopMenuHeight;

+++//+Get+id+of+current+scroll+item
+++var+cur+=+scrollItems.map(function(){
+++++if+($(this).offset().top+<+fromTop)
+++++++return+this;
+++});
+++//+Get+the+id+of+the+current+element
+++cur+=+cur[cur.length-1];
+++var+id+=+cur+&&+cur.length+?+cur[0].id+:+"";
+++//+Set/remove+active+class
+++menuItems
+++++.parent().removeClass("active")
+++++.end().filter("[href='#"%2Bid%2B"']").parent().addClass("active");
});​|code-block|syntax|javascript|389576|查看上面的in+action+at+jsFiddle，包括滚动动画。|389577|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/scroll/|1|http://jsfiddle.net/mekwall/up4nu/^0|9|R|0|0|0|0|5|L|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

<p>It's done by <a href="http://api.jquery.com/scroll/" rel="noreferrer">binding to the scroll event</a> of the container (usually window).</p>

<p>Quick example:</p>

<pre><code>// Cache selectors
var topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;

   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top &lt; fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur &amp;&amp; cur.length ? cur[0].id : "";
   // Set/remove active class
   menuItems
     .parent().removeClass("active")
     .end().filter("[href='#"+id+"']").parent().addClass("active");
});​
</code></pre>

<p>See the above <a href="http://jsfiddle.net/mekwall/up4nu/" rel="noreferrer">in action at jsFiddle</a> including scroll animation.</p>


blocks|key|389638|text|只需检查我的代码和狙击手和演示链接：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|389639|++++//+Basice+Code+keep+it+
++++$(document).ready(function+()+{
++++++++$(document).on("scroll",+onScroll);

++++++++//smoothscroll
++++++++$('a[href%5E="#"]').on('click',+function+(e)+{
++++++++++++e.preventDefault();
++++++++++++$(document).off("scroll");

++++++++++++$('a').each(function+()+{
++++++++++++++++$(this).removeClass('active');
++++++++++++})
++++++++++++$(this).addClass('active');

++++++++++++var+target+=+this.hash,
++++++++++++++++menu+=+target;
++++++++++++$target+=+$(target);
++++++++++++$('html,+body').stop().animate({
++++++++++++++++'scrollTop':+$target.offset().top%2B2
++++++++++++},+500,+'swing',+function+()+{
++++++++++++++++window.location.hash+=+target;
++++++++++++++++$(document).on("scroll",+onScroll);
++++++++++++});
++++++++});
++++});

//+Use+Your+Class+or+ID+For+Selection+

++++function+onScroll(event){
++++++++var+scrollPos+=+$(document).scrollTop();
++++++++$('#menu-center+a').each(function+()+{
++++++++++++var+currLink+=+$(this);
++++++++++++var+refElement+=+$(currLink.attr("href"));
++++++++++++if+(refElement.position().top+<=+scrollPos+&&+refElement.position().top+%2B+refElement.height()+>+scrollPos)+{
++++++++++++++++$('#menu-center+ul+li+a').removeClass("active");
++++++++++++++++currLink.addClass("active");
++++++++++++}
++++++++++++else{
++++++++++++++++currLink.removeClass("active");
++++++++++++}
++++++++});
++++}|code-block|syntax|javascript|389640|demo+live+|offset|length|389641|​|389642|$(document).ready(function+()+{
++++$(document).on("scroll",+onScroll);
++++
++++//smoothscroll
++++$('a[href%5E="#"]').on('click',+function+(e)+{
++++++++e.preventDefault();
++++++++$(document).off("scroll");
++++++++
++++++++$('a').each(function+()+{
++++++++++++$(this).removeClass('active');
++++++++})
++++++++$(this).addClass('active');
++++++
++++++++var+target+=+this.hash,
++++++++++++menu+=+target;
++++++++$target+=+$(target);
++++++++$('html,+body').stop().animate({
++++++++++++'scrollTop':+$target.offset().top%2B2
++++++++},+500,+'swing',+function+()+{
++++++++++++window.location.hash+=+target;
++++++++++++$(document).on("scroll",+onScroll);
++++++++});
++++});
});

function+onScroll(event){
++++var+scrollPos+=+$(document).scrollTop();
++++$('#menu-center+a').each(function+()+{
++++++++var+currLink+=+$(this);
++++++++var+refElement+=+$(currLink.attr("href"));
++++++++if+(refElement.position().top+<=+scrollPos+&&+refElement.position().top+%2B+refElement.height()+>+scrollPos)+{
++++++++++++$('#menu-center+ul+li+a').removeClass("active");
++++++++++++currLink.addClass("active");
++++++++}
++++++++else{
++++++++++++currLink.removeClass("active");
++++++++}
++++});
}|389643|body,+html+{
++++margin:+0;
++++padding:+0;
++++height:+100%25;
++++width:+100%25;
}
.menu+{
++++width:+100%25;
++++height:+75px;
++++background-color:+rgba(0,+0,+0,+1);
++++position:+fixed;
++++background-color:rgba(4,+180,+49,+0.6);
++++-webkit-transition:+all+0.4s+ease;
++++-moz-transition:+all+0.4s+ease;
++++-o-transition:+all+0.4s+ease;
++++transition:+all+0.4s+ease;
}
.light-menu+{
++++width:+100%25;
++++height:+75px;
++++background-color:+rgba(255,+255,+255,+1);
++++position:+fixed;
++++background-color:rgba(4,+180,+49,+0.6);
++++-webkit-transition:+all+0.4s+ease;
++++-moz-transition:+all+0.4s+ease;
++++-o-transition:+all+0.4s+ease;
++++transition:+all+0.4s+ease;
}
#menu-center+{
++++width:+980px;
++++height:+75px;
++++margin:+0+auto;
}
#menu-center+ul+{
++++margin:+0+0+0+0;
}
#menu-center+ul+li+a{
		padding:+32px+40px;
}
#menu-center+ul+li+{
++++list-style:+none;
++++margin:+0+0+0+-4px;
++++display:+inline;

}
.active,+#menu-center+ul+li+a:hover++{
++++font-family:'Droid+Sans',+serif;
++++font-size:+14px;
++++color:+#fff;
++++text-decoration:+none;
++++line-height:+50px;
	background-color:+rgba(0,+0,+0,+0.12);
	padding:+32px+40px;

}
a+{
++++font-family:'Droid+Sans',+serif;
++++font-size:+14px;
++++color:+black;
++++text-decoration:+none;
++++line-height:+72px;
}
#home+{
++++background-color:+#286090;
++++height:+100vh;
++++width:+100%25;
++++overflow:+hidden;
}
#portfolio+{
++++background:+gray;+
++++height:+100vh;
++++width:+100%25;
}
#about+{
++++background-color:+blue;
++++height:+100vh;
++++width:+100%25;
}
#contact+{
++++background-color:+rgb(154,+45,+45);
++++height:+100vh;
++++width:+100%25;
}|389644|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

			<div+class="m1+menu">
			<div+id="menu-center">
				<ul>
					<li><a+class="active"+href="#home">Home</a>

					</li>
					<li><a+href="#portfolio">Portfolio</a>

					</li>
					<li><a+href="#about">About</a>

					</li>
					<li><a+href="#contact">Contact</a>

					</li>
				</ul>
			</div>
			</div>
			<div+id="home"></div>
			<div+id="portfolio"></div>
			<div+id="about"></div>
			<div+id="contact"></div>|389645|389646|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/ashikjs/2g5p44of/^0|0|0|0|A|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|13|8|@]|9|@$I|14|J|15|1|16]]|A|$]]|$1|K|3|L|5|6|7|17|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|S|3|L|5|6|7|1B|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10]]]]

<p>Just check my Code and Sniper and demo link :</p>

<pre><code>    // Basice Code keep it 
    $(document).ready(function () {
        $(document).on("scroll", onScroll);

        //smoothscroll
        $('a[href^="#"]').on('click', function (e) {
            e.preventDefault();
            $(document).off("scroll");

            $('a').each(function () {
                $(this).removeClass('active');
            })
            $(this).addClass('active');

            var target = this.hash,
                menu = target;
            $target = $(target);
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top+2
            }, 500, 'swing', function () {
                window.location.hash = target;
                $(document).on("scroll", onScroll);
            });
        });
    });

// Use Your Class or ID For Selection 

    function onScroll(event){
        var scrollPos = $(document).scrollTop();
        $('#menu-center a').each(function () {
            var currLink = $(this);
            var refElement = $(currLink.attr("href"));
            if (refElement.position().top &lt;= scrollPos &amp;&amp; refElement.position().top + refElement.height() &gt; scrollPos) {
                $('#menu-center ul li a').removeClass("active");
                currLink.addClass("active");
            }
            else{
                currLink.removeClass("active");
            }
        });
    }
</code></pre>

<p><a href="https://jsfiddle.net/ashikjs/2g5p44of/" rel="noreferrer">demo live </a></p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
    $(document).on("scroll", onScroll);
    
    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
      
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top &lt;= scrollPos &amp;&amp; refElement.position().top + refElement.height() &gt; scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.menu {
    width: 100%;
    height: 75px;
    background-color: rgba(0, 0, 0, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.light-menu {
    width: 100%;
    height: 75px;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
#menu-center {
    width: 980px;
    height: 75px;
    margin: 0 auto;
}
#menu-center ul {
    margin: 0 0 0 0;
}
#menu-center ul li a{
		padding: 32px 40px;
}
#menu-center ul li {
    list-style: none;
    margin: 0 0 0 -4px;
    display: inline;

}
.active, #menu-center ul li a:hover  {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
	background-color: rgba(0, 0, 0, 0.12);
	padding: 32px 40px;

}
a {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: black;
    text-decoration: none;
    line-height: 72px;
}
#home {
    background-color: #286090;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
#portfolio {
    background: gray; 
    height: 100vh;
    width: 100%;
}
#about {
    background-color: blue;
    height: 100vh;
    width: 100%;
}
#contact {
    background-color: rgb(154, 45, 45);
    height: 100vh;
    width: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;!--	&lt;div class="container"&gt;	---&gt;
			&lt;div class="m1 menu"&gt;
			&lt;div id="menu-center"&gt;
				&lt;ul&gt;
					&lt;li&gt;&lt;a class="active" href="#home"&gt;Home&lt;/a&gt;

					&lt;/li&gt;
					&lt;li&gt;&lt;a href="#portfolio"&gt;Portfolio&lt;/a&gt;

					&lt;/li&gt;
					&lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;

					&lt;/li&gt;
					&lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;

					&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/div&gt;
			&lt;/div&gt;
			&lt;div id="home"&gt;&lt;/div&gt;
			&lt;div id="portfolio"&gt;&lt;/div&gt;
			&lt;div id="about"&gt;&lt;/div&gt;
			&lt;div id="contact"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|605762|text|只是为了补充@Marcus+Ekwall的答案。这样做只会得到锚链接。如果你有锚链接和常规链接的混合，你就不会有问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|605763|jQuery(document).ready(function(jQuery)+{++++++++++++
++++++++++++var+topMenu+=+jQuery("#top-menu"),
++++++++++++++++offset+=+40,
++++++++++++++++topMenuHeight+=+topMenu.outerHeight()%2Boffset,
++++++++++++++++//+All+list+items
++++++++++++++++menuItems+=++topMenu.find('a[href*="#"]'),
++++++++++++++++//+Anchors+corresponding+to+menu+items
++++++++++++++++scrollItems+=+menuItems.map(function(){
++++++++++++++++++var+href+=+jQuery(this).attr("href"),
++++++++++++++++++id+=+href.substring(href.indexOf('#')),
++++++++++++++++++item+=+jQuery(id);
++++++++++++++++++//console.log(item)
++++++++++++++++++if+(item.length)+{+return+item;+}
++++++++++++++++});

++++++++++++//+so+we+can+get+a+fancy+scroll+animation
++++++++++++menuItems.click(function(e){
++++++++++++++var+href+=+jQuery(this).attr("href"),
++++++++++++++++id+=+href.substring(href.indexOf('#'));
++++++++++++++++++offsetTop+=+href+===+"#"+?+0+:+jQuery(id).offset().top-topMenuHeight%2B1;
++++++++++++++jQuery('html,+body').stop().animate({+
++++++++++++++++++scrollTop:+offsetTop
++++++++++++++},+300);
++++++++++++++e.preventDefault();
++++++++++++});

++++++++++++//+Bind+to+scroll
++++++++++++jQuery(window).scroll(function(){
+++++++++++++++//+Get+container+scroll+position
+++++++++++++++var+fromTop+=+jQuery(this).scrollTop()%2BtopMenuHeight;

+++++++++++++++//+Get+id+of+current+scroll+item
+++++++++++++++var+cur+=+scrollItems.map(function(){
+++++++++++++++++if+(jQuery(this).offset().top+<+fromTop)
+++++++++++++++++++return+this;
+++++++++++++++});

+++++++++++++++//+Get+the+id+of+the+current+element
+++++++++++++++cur+=+cur[cur.length-1];
+++++++++++++++var+id+=+cur+&&+cur.length+?+cur[0].id+:+"";+++++++++++++++

+++++++++++++++menuItems.parent().removeClass("active");
+++++++++++++++if(id){
++++++++++++++++++++menuItems.parent().end().filter("[href*='#"%2Bid%2B"']").parent().addClass("active");
+++++++++++++++}

++++++++++++})
++++++++})|code-block|syntax|javascript|605764|基本上我换掉了|605765|menuItems+=+topMenu.find("a"),|605766|通过|605767|menuItems+=++topMenu.find('a[href*="#"]'),|605768|匹配所有的链接与锚点的某处，并改变了所有必要的，使它与此工作|605769|在jsfiddle上查看它的实际操作|offset|length|605770|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/Karzin/9wcgbx09/1/^0|0|0|0|0|0|0|0|1|8|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@$S|1A|T|1B|1|1C]]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>Just to complement @Marcus Ekwall 's answer.
Doing like this will get only anchor links. And you aren't going to have problems if you have a mix of anchor links and regular ones.</p>

<pre><code>jQuery(document).ready(function(jQuery) {            
            var topMenu = jQuery("#top-menu"),
                offset = 40,
                topMenuHeight = topMenu.outerHeight()+offset,
                // All list items
                menuItems =  topMenu.find('a[href*="#"]'),
                // Anchors corresponding to menu items
                scrollItems = menuItems.map(function(){
                  var href = jQuery(this).attr("href"),
                  id = href.substring(href.indexOf('#')),
                  item = jQuery(id);
                  //console.log(item)
                  if (item.length) { return item; }
                });

            // so we can get a fancy scroll animation
            menuItems.click(function(e){
              var href = jQuery(this).attr("href"),
                id = href.substring(href.indexOf('#'));
                  offsetTop = href === "#" ? 0 : jQuery(id).offset().top-topMenuHeight+1;
              jQuery('html, body').stop().animate({ 
                  scrollTop: offsetTop
              }, 300);
              e.preventDefault();
            });

            // Bind to scroll
            jQuery(window).scroll(function(){
               // Get container scroll position
               var fromTop = jQuery(this).scrollTop()+topMenuHeight;

               // Get id of current scroll item
               var cur = scrollItems.map(function(){
                 if (jQuery(this).offset().top &lt; fromTop)
                   return this;
               });

               // Get the id of the current element
               cur = cur[cur.length-1];
               var id = cur &amp;&amp; cur.length ? cur[0].id : "";               

               menuItems.parent().removeClass("active");
               if(id){
                    menuItems.parent().end().filter("[href*='#"+id+"']").parent().addClass("active");
               }

            })
        })
</code></pre>

<p>Basically i replaced </p>

<pre><code>menuItems = topMenu.find("a"),
</code></pre>

<p>by</p>

<pre><code>menuItems =  topMenu.find('a[href*="#"]'),
</code></pre>

<p>To match all links with anchor somewhere, and changed all that what was necessary to make it work with this </p>

<p>See it in action on <a href="https://jsfiddle.net/Karzin/9wcgbx09/1/" rel="nofollow">jsfiddle</a></p>


blocks|key|605826|text|如果您希望接受的答案在JQuery+3中起作用，请更改代码，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|605827|var+scrollItems+=+menuItems.map(function+()+{
++++var+id+=+$(this).attr("href");
++++try+{
++++++++var+item+=+$(id);
++++++if+(item.length)+{
++++++++return+item;
++++++}
++++}+catch+{}
++});|code-block|syntax|javascript|605828|我还添加了try-catch以防止javascript在没有该id的元素时崩溃。请随意改进它;)|605829|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If you want the accepted answer to work in JQuery 3 change the code like this:</p>

<pre><code>var scrollItems = menuItems.map(function () {
    var id = $(this).attr("href");
    try {
        var item = $(id);
      if (item.length) {
        return item;
      }
    } catch {}
  });
</code></pre>

<p>I also added a try-catch to prevent javascript from crashing if there is no element by that id. Feel free to improve it even more ;)</p>


<p>As you scroll down the page, the active menu item changes.  How is this done?</p>


Change Active Menu Item on Page Scroll?

容器

jQuery

向下滚动页面时，活动菜单项会发生变化。这是怎么做的？

问是否更改页面滚动上的活动菜单项？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否更改页面滚动上的活动菜单项？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否更改页面滚动上的活动菜单项？
EN