【问题标题】:Jquery scroll, top offset for active classJquery滚动,活动类的顶部偏移
【发布时间】:2015-03-20 20:10:38
【问题描述】:

你能帮我解决一件我无法做到的事情吗?

我在网站的顶部菜单中使用了 scrolling-nav.js - 内部、外部等。http://lukaszradwan.com/www_architect/services.php

现在我使用此代码设置偏移量

$(window).scroll(function() {
if ($(".navbar").offset().top > 130) {
    $(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
    $(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});

$(function() {
$('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top - 130
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
});
});

但是当你点击例如Exterior时,活动类并没有在这个位置工作。

我尝试使用另一个主题的方法,但是我的“js”知识很差。 jquery scroll, change navigation active class as the page is scrolling, relative to sections

提前致谢。

【问题讨论】:

  • 你能做一个小提琴吗?帮助一个人会容易得多。
  • 让您访问我的网站会更容易,有数千行代码,实际上我不知道哪个是哪个。这个小提琴看起来非常相似http://jsfiddle.net/gUWdJ/1389/ 我需要像上面小提琴中的滚动功能调整到我的js代码。很抱歉造成这种混乱:)
  • 是 $($anchor.attr('href')) 的定位点与导航栏中的 callToAction 相同吗?
  • 有 .offset().top - 130 用于滚动,我需要为 .active 设置相同的值,但我不知道如何:/

标签: javascript jquery css scroll offset


【解决方案1】:

目前,只有当部分的顶部偏移量为 0 时才应用活动类。您可以使用 jquery 将其更改为其他值,例如 130。添加此代码:

$(window).scroll(function(){
    /* Get id of sections corresponding to top nav menu */
    var scroll_sections = []
    $('a.page-scroll').each(function(){
      scroll_sections.push($(this).attr('href'));
    })

    for (i in scroll_sections)
    {   
      /* Instead of 0, if the top position offset of section is 130 or less,
         we add active class for that section in nav menu */
      if ($(scroll_sections[i]).position().top <= $(window).scrollTop() + 130) 
      {
        $('nav li.active').removeClass('active');
        $('nav a').eq(i).parent().addClass('active');
      }
    }
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-08
    • 1970-01-01
    • 2012-08-01
    • 1970-01-01
    • 1970-01-01
    • 2020-08-16
    相关资源
    最近更新 更多