Question

我正在使用bootstrap 3并在页面顶部有一个全屏英雄单元，下面是我的导航。我有一些js允许我的导航栏在你滚动浏览全屏英雄后坚持固定在顶部。还有一些js用于我平滑的滚动链接。

问题是在滚动浏览全屏英雄之前和之后偏移是不同的。但是当你越过jumbotron时它会正常工作。我尝试了很多不同的东西，但我似乎可以让它完全正常工作。

这是我用于平滑滚动链接的js：

$(document).ready(function() {
    // navigation click actions 
    $('.scroll-link').on('click', function(event){
        event.preventDefault();
        var sectionID = $(this).attr("data-id");
        scrollToID('#' + sectionID, 750);
    });
    // scroll to top action
    $('.scroll-top').on('click', function(event) {
        event.preventDefault();
        $('html, body').animate({scrollTop:0}, 1200);       
    });
    // mobile nav toggle
    $('#nav-toggle').on('click', function (event) {
        event.preventDefault();
        $('#main-nav').toggleClass("open");
    });
});
// scroll function
function scrollToID(id, speed){
    var offSet = 95;
    var targetOffset = $(id).offset().top - offSet;
    var mainNav = $('#main-nav');
    $('html,body').animate({scrollTop:targetOffset}, speed);
    if (mainNav.hasClass("open")) {
        mainNav.css("height", "1px").removeClass("in").addClass("collapse");
        mainNav.removeClass("open");
    }
}
if (typeof console === "undefined") {
    console = {
        log: function() { }
    };
}

通过更改var offSet = 95;我可以调整偏移但是在导航栏顶到顶部之前使用180的最佳方式是什么？但是当它出现时是95？

此处还有我用于导航栏的js：

$(function () {
/*    $(".navbar-fixed-top").css({"top":$(".jumbotron").height()});

    $(window).resize(function (e) {
        $(".navbar-fixed-top").css({"top":$(".jumbotron").height()});
    });*/
    $(document).on( 'scroll', function(){
        console.log('scroll top : ' + $(window).scrollTop());
        if($(window).scrollTop()>=$(".jumbotron").height())
        {
             $(".navbar").addClass("navbar-fixed-top");
        }

        if($(window).scrollTop()<$(".jumbotron").height())
        {
             $(".navbar").removeClass("navbar-fixed-top");
        }
    });
});

Answer 1

你对angular.js开放吗？我有一个用于此的指令。正如here所见。

我会抓住你的plunker链接。您可能会发现代码很有用。

基本上你需要创建一个ghost dom元素，以便在将它拉到新的布局位置时取代菜单。

编辑：Here it is

我不建议为此抓住角度。但您可以使用事件和逻辑的基础来构建自己的解决方案。

这是创建一个元素并放置在其位置

$scope.spacer = $element.after(
    '<div class="spacer" style="height:' + $element[0].clientHeight + 'px">&nbsp;</div>').next();

然后当菜单返回静态位置时，将删除此元素。

检查dom并观察它是如何变化的，这可能会帮助您查看需要发生的事件和变化。

编辑2解决方案：

HERE is the concepts applied to your JSFiddle

Answer 2

这不是最佳解决方案，但通过向margin: 0 0 -100px 0;添加.navbar，您会失去间距问题。

由于图像丢失，您还得到22个控制台错误。我并不是说这会导致任何重大问题，但你最好不要输掉它们。

Answer 3

问题在于，当你没有滚过英雄时，导航仍然是布局的一部分，并将内容推低一点。滚动浏览（手动或通过脚本）英雄时，导航将被删除并定位。 使下面的所有内容完全“跳起”导航高度。

这意味着，如果投资组合从顶部开始1000px，则点击您说：从顶部开始1000px;但随后个人移动100px向上移动（如上所述），这意味着当你按照要求向窗口滚动900px时，它从顶部开始1000px。

当你滚过英雄时，没有任何改变它的位置。

更改scrollTop偏移量

3 个答案: