码迷,mamicode.com
首页 > 其他好文 > 详细

导航栏监听页面滚动跟随 简单封装

时间:2019-12-11 12:43:00      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:find   abs   tle   function   导航条   fat   fse   foreach   title   

 

 

 

 

slide(‘.wedding-title‘, ‘.expo-list‘, ‘change‘,‘.nav‘); //导航条  参数:导航栏父级, 被监听元素 , 导航改变样式,导航栏
function slide(navfather, tClass, activeClass,nav) {
    var $navfather = $(navfather),
        $nav = $(nav);
    $navfather.css({
        "position": ‘relative‘
    });
    var $navfatherOffset = $navfather.offset().top,
        $navfatherH = $navfather.height();
    var arrayH = [];
    $(tClass).each(function(i, list) {
        arrayH.push($(this).offset().top - $navfatherH * 3 / 2)
    });
    $nav.find(‘li‘).click(function(e) {
        e.preventDefault();
        var index = $(this).index();
        $(‘body,html‘).stop().animate({
            scrollTop: arrayH[index] + 10
        }, 200)

    });
     $(window).scroll(function(){
            if ($(window).scrollTop()>=$navfather.offset().top){
                $nav.css({‘position‘:‘fixed‘,‘zIndex‘:‘7‘});
            }else{
                $nav.css({‘position‘:‘absolute‘});
            }
        arrayH.forEach(function(h, i) {
            
            if ($(window).scrollTop() >= h) {
                $navfather.find(‘li‘).eq(i).addClass(activeClass).siblings(‘li‘).removeClass(activeClass);
            }
        })
    })
}

 

导航栏监听页面滚动跟随 简单封装

标签:find   abs   tle   function   导航条   fat   fse   foreach   title   

原文地址:https://www.cnblogs.com/wxyblog/p/12021573.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!