Question

我有以下代码。当不需要滚动查看时，一切都显示正常。当需要滚动时，容器会很好地转到页面顶部，但宽度会变为原始全宽的50％。

有更好的方法吗？谁能看到我做错了什么？

<img src="logo.png" style="margin-top:20px; margin-right:20px; float:right; z-index:0;" />

<div class="container-fluid" id="jjhead">
    <div class="row" id="index3" style="margin-bottom:10px;">
        <div class="col-md-2"></div>
        <div class="col-md-1 active">Home</div>
        <div class="col-md-1">About</div>
        <div class="col-md-1">What's New</div>
        <div class="col-md-1">Integrated Provider Performance</div>
        <div class="col-md-1">Comissioning Intelligence</div>
        <div class="col-md-1">Intelligence By Role</div>
        <div class="col-md-1">'How To' Guides</div>
        <div class="col-md-1">FAQs</div>
        <div class="col-md-2"></div>
    </div>
</div>

和

<SCRIPT>

$(document).ready(function () {

    var div = $('div#jjhead');
    var start = 100;

    $.event.add(window, "scroll", function () {
        var p = $(window).scrollTop();
        $(div).css('position', ((p) > start) ? 'fixed' : 'static');
        $(div).css('top', ((p) > start) ? '0px' : '');
    });

});

我甚至尝试了以下方法。颜色会发生变化，但不会打开

<SCRIPT>

    $(document).ready(function () {

        var div = $('div#jjhead');
        var start = $(div).offset().top;

        $.event.add(window, "scroll", function () {
            var p = $(window).scrollTop();
            //$(div).css('position', ((p) > start) ? 'fixed' : 'static');
            if ((p) > start) {
                $(div).wrap('<div class="navbar navbar-default navbar-fixed-top" role="navigation"></div>');
                $(div).css('background-color', 'red');
            }
            if ((p) < start) {
                $(div).unwrap();
                $(div).css('background-color', 'green');
            }
        });

    });

</SCRIPT>

我发现如果您只是滚动以便功能启动并将其设置为固定标题，然后向后滚动，则可以正常工作。但是，如果您滚动到底部并再次返回到顶部，则不会

Answer 1

似乎已修复它 - 在固定DIV中添加了另一个“ whoopla ”ID，然后在需要删除时执行了$('div#whoopla').children().unwrap();

简而言之：

<SCRIPT>

$(document).ready(function () {

    var div = $('div#jjhead');
    var start = $(div).offset().top;

    $(window).scroll(function () {
        var p = $(window).scrollTop();
        //$(div).css('position', ((p) > start) ? 'fixed' : 'static');
        if ((p) < start) {
            $('div#whoopla').children().unwrap();
        }

        if ((p) > start) {
            $(div).wrap('<div class="navbar navbar-default navbar-fixed-top" id="whoopla" role="navigation"></div>');
        }

    });

});

问题是，当DIV实际上没有被包裹时，解包被解雇了，所以只有在一个元素（实际存在的）上展开才能解开儿童

Bootstrap：固定容器（带边距顶部）滚动时

1 个答案: