পৃষ্ঠা স্ক্রোলে সক্রিয় মেনু আইটেমটি পরিবর্তন করবেন?

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 এ কর্মের উপরের দেখুন See

Comments

যদি আপনার মেনুতে অন-পৃষ্ঠার আইডি এবং নিয়মিত পৃষ্ঠাগুলির মিশ্রণ থাকে তবে অন-পৃষ্ঠার আইডি লিঙ্কগুলি প্রথমে রাখুন, তারপরে [আপনার অন পৃষ্ঠার লিঙ্কগুলি - 1] এর সাথে প্রতিস্থাপন করুন menuItems = topMenu.find("a"),to menuItems = topMenu.find("a").slice(0,4),4

— স্টিফেন Sauceer

আমি প্রকৃতপক্ষে মেন্যু আইটেমস = টপমেনু.ফাইন্ড ('a [href ^ = "#"]') ব্যবহার করেছি, সুতরাং কেবল অ্যাঙ্কর লিঙ্কগুলি ফেরত। একটি যাদুমন্ত্র মত কাজ করে.

— জুলিয়ান কে

ভাজা ভাঙা। আপনি এটা ঠিক করতে পারেন? Thx

— m1crdy

@ এম 1 সিআরডি মাথা আপ করার জন্য ধন্যবাদ। এটা ঠিক করা হয়েছে। দেখে মনে হচ্ছে jQuery প্রান্তের কিছু এটি ভেঙেছে। 2.1.0 :) এর সাথে দুর্দান্ত কাজ করে

— mekwall

@ জোয়েল আজেভেদো দেখে মনে হচ্ছে সিজল বদলে গেছে। 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

কেবলমাত্র @ মারকাস একওয়াল এর উত্তরের পরিপূরক হিসাবে। এটি করার ফলে কেবল অ্যাঙ্কর লিঙ্ক পাবেন। আপনার যদি অ্যাঙ্কর লিংক এবং নিয়মিত একটি মিশ্রণ থাকে তবে আপনার সমস্যা হবে না।

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*="#"]'),

অ্যাঙ্কারের সাথে সমস্ত লিঙ্ক কোথাও মেলে, এবং এটির সাথে এটি কাজ করার জন্য প্রয়োজনীয় সমস্তগুলি পরিবর্তন করে

এটি jsfizz এ কর্মে দেখুন

Comments

পৃষ্ঠার চেয়ে মেনুটি বড় হলে বিশেষত আমি উল্লম্ব মেনুটির জন্য এটি কীভাবে প্রসারিত করব? pyze.com/product/docs/index.html যখন কোনও ব্যবহারকারী ডানদিকের সামগ্রীতে স্ক্রোল করে, আমি বামদিকে উপযুক্ত মেনুটি সক্রিয় করতে চাই এবং সক্রিয় মেনুটি দেখানোর প্রয়োজন হলে মেনুটি স্ক্রোল করতে চাই। যে কোনও পয়েন্টার প্রশংসা করা হয়।

— ডিকি সিং

এটা খুব godশ্বর, আপনাকে ধন্যবাদ। তবে, আমি বৈশিষ্ট্য নির্বাচনকারীকে * = = from = এ পরিবর্তন করব। যদি আপনি * = ব্যবহার করেন তবে আপনি google.com/# এর মতো জিনিসও ধরতে পারবেন যদিও এটি বাহ্যিক লিঙ্ক। গুণাবলী নির্বাচনকারী এখানে ভালভাবে ব্যাখ্যা করা হয়েছে: 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 {}
  });

জাভাস্ক্রিপ্টটিকে বিধ্বস্ত হওয়া থেকে রোধ করার জন্য আমি চেষ্টা করেও যুক্ত করেছি যদি id আইডিতে কোনও উপাদান না থাকে। আরও উন্নত করতে নির্দ্বিধায় মনে করুন;)