पृष्ठ स्क्रॉल पर सक्रिय मेनू आइटम बदलें?

Question

जैसे ही आप पृष्ठ को नीचे स्क्रॉल करते हैं, सक्रिय मेनू आइटम बदल जाता है। यह कैसे किया जाता है?

Answer 1

यह कंटेनर के स्क्रॉल इवेंट (आमतौर पर विंडो) के लिए बाइंडिंग द्वारा किया जाता है ।

त्वरित उदाहरण:

// 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 < 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='#"+id+"']").parent().addClass("active");
});​

स्क्रॉल एनीमेशन सहित jsFiddle पर कार्रवाई में ऊपर देखें ।

Comments

अपने मेनू पर पृष्ठ की आईडी और नियमित रूप से पृष्ठों का एक मिश्रण है, तो ऑन-पेज आईडी लिंक पहले, तो बदल जगह menuItems = topMenu.find("a"),करने के लिए menuItems = topMenu.find("a").slice(0,4),, की जगह 4के साथ [- 1 आपके ऑन-पृष्ठ लिंक]।

— स्टीफन सॉसर ने

मैंने वास्तव में menuItems = topMenu.find ('[a href ^ = "#"]') का उपयोग किया है, इस प्रकार केवल एंकर लिंक वापस आ रहे हैं। एक जादू की तरह काम करता है।

— जूलियन के

मुरली टूट गई है। क्या आप इसे ठीक कर सकते हैं? Thx

— m1crdy

@ m1crdy सिर के लिए धन्यवाद। यह तय हो गया है। ऐसा लगता है जैसे jQuery किनारे में कुछ टूट गया। 2.1.0 :) के साथ ठीक काम करता है

— mekwall

@JoelAzevedo लगता है सिज़ल बदल गए हैं। JQuery 2.2 के साथ काम करने के लिए उत्तर और परीक्षण मामले को अपडेट किया।

— मेकवॉल

Answer 2

बस मेरे कोड और निशानची और डेमो लिंक की जाँच करें:

    // 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 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
                $('#menu-center ul li a').removeClass("active");
                currLink.addClass("active");
            }
            else{
                currLink.removeClass("active");
            }
        });
    }

डेमो रहते हैं

$(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 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

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%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--	<div class="container">	--->
			<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>

Answer 3

बस @Marcus Ekwall के जवाब के पूरक के लिए। इस तरह करने से केवल लंगर लिंक मिलेंगे। और अगर आपके पास लंगर लिंक और नियमित लोगों का मिश्रण है तो आपको समस्या नहीं होगी।

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 < 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*='#"+id+"']").parent().addClass("active");
               }

            })
        })

मूल रूप से मैं बदल दिया

menuItems = topMenu.find("a"),

द्वारा

menuItems =  topMenu.find('a[href*="#"]'),

लंगर के साथ सभी लिंक का मिलान करने के लिए, और सभी को बदल दिया कि इसके साथ काम करने के लिए क्या आवश्यक था

इसे jsfiddle पर कार्रवाई में देखें

Comments

मैं इसे विशेष रूप से एक ऊर्ध्वाधर मेनू के लिए कैसे बढ़ाता हूं, जब मेनू पृष्ठ से बड़ा हो? pyze.com/product/docs/index.html जब कोई उपयोगकर्ता दाईं ओर सामग्री पर स्क्रॉल करता है, तो मैं सक्रिय मेनू दिखाने के लिए आवश्यक मेनू को बाईं ओर सक्रिय करना और मेनू को स्क्रॉल करना चाहूंगा। किसी भी संकेत की सराहना की जाती है।

— डिक्की सिंह

यह बहुत भगवान है, धन्यवाद। हालाँकि, मैं विशेषता चयनकर्ता को * = से ^ = में बदल दूंगा। यदि आप * = का उपयोग करते हैं, तो आप google.com/#something जैसी चीजों को भी पकड़ लेंगे , हालांकि यह एक बाहरी लिंक है। गुण चयनकर्ता को यहाँ अच्छी तरह से समझाया गया है: w3schools.com/css/css_attribute_selectors.asp

— जाक

Answer 4

यदि आप JQuery 3 में काम करने के लिए स्वीकृत उत्तर चाहते हैं तो कोड को इस तरह बदलें:

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

मैंने उस आईडी द्वारा कोई तत्व नहीं होने पर जावास्क्रिप्ट को दुर्घटनाग्रस्त होने से बचाने के लिए एक ट्राइ-कैच जोड़ा। इसे और भी बेहतर बनाने के लिए स्वतंत्र महसूस करें;)