文章/答案/技术大牛

发布

社区首页 >问答首页 >Javascript导航scrollTo

问Javascript导航scrollTo
EN

Stack Overflow用户

提问于 2015-03-08 12:44:20

回答 1查看 172关注 0票数 0

所以我得到了一个很好的粘性标题，唯一的问题是当我按下一个链接，屏幕滚动下来，它会重叠我的内容，所以我需要设置一个-47 to高度或者类似的东西，所以# it滚动到菜单下面，而不是在菜单下面。

我的代码

$(document).ready(function() {  
var stickyNavTop = $('.header').offset().top;  

    var stickyNav = function(){  
        var scrollTop = $(window).scrollTop();  

        if (scrollTop > stickyNavTop) {   
            $('.header').addClass('sticky');
        } else {  
            $('.header').addClass('sticky');   
        }  
    };  

    stickyNav();  

    $(window).scroll(function() {  
        stickyNav();  
    });  
}); 

$(document).ready(function() {
        var pull        = $('#pull');
            menu        = $('nav ul');
            menuHeight  = menu.height();

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });
        $(closenav).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function(){
            var w = $(window).width();
            if(w > 760 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });

抱歉，如果我不够清楚，需要用另一种方式来解释。请记住我是JS新手！

谢谢!

javascript

header

sticky

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-03-08 13:01:21

var $root = $('html, body');
$('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top -47
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

将此添加到$(document).ready(function(){});中

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28926529

复制

相似问题

问Javascript导航scrollTo
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript导航scrollToEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript导航scrollTo
EN