根据页面位置添加粘性不起作用

时间:2016-10-20 10:02:18

标签: javascript jquery html

我想根据用户的位置和滚动添加类。 我想将它用于子菜单,当用户滚动它时它应该变粘。

除此之外应该添加课程" active"到菜单项时,显示页面中的部分。

由于某种原因,它不起作用。

我错过了什么?

jsFiddle:https://jsfiddle.net/d737mt5g/2/

jQuery的:

$j(window).scroll(function(){
  var sticky = $j('.menu-header-product'),
      scroll = $j(window).scrollTop();

  var elementOffset=jQuery("#productnav").offset();    
  if (scroll >= elementOffset.top - 88) sticky.addClass('sticky');
  else sticky.removeClass('sticky');
});
$j(window).scroll(function(){
  var sticky = $j('.content'),
      scroll = $j(window).scrollTop();

  var elementOffset=jQuery("#productnav").offset();    
  if (scroll >= elementOffset.top - 88) sticky.addClass('sticky');
  else sticky.removeClass('sticky');
});
    $j(document).ready(function () {
        $j(document).on("scroll", onScroll);

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

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

            var target = this.hash;
            $jtarget = $j(target);
            $j('html, body').stop().animate({
            'scrollTop': $jtarget.offset().top - 88 /**just subtract the height of the fixed html part */
             }, 500, 'swing', function () {
                window.location.hash = target;
                $j(document).on("scroll", onScroll);
            });
        });
    });

function onScroll(event){
        var scrollPosition = $j(document).scrollTop();
        $j('nav a').each(function () {
            var currentLink = $j(this);
            var refElement = $j(currentLink.attr("href"));
            if (refElement.position().top - 88 <= scrollPosition && refElement.position().top - 125 + refElement.height() > scrollPosition) {
                $j('nav ul li a').removeClass("active");
                currentLink.addClass("active");
            }
            else{
                currentLink.removeClass("active");
            }
        });
    }

0 个答案:

没有答案