Question

我是JavaScript和JQuery的新手;请耐心等待我！

我正在尝试实现类似https://codepen.io/dukecroc/pen/yNJWQz的内容，类followMeBar在向下滚动后会重复。

当向下滚动淡出并显示图像时，我有一个标题容器。第二个容器具有类followMeBar。 HTML和CSS是

HTML

<div class="container-fluid table-container fade">

    <div class="row table-row">
        <div class="col-md-6 table-col text-center">
            <h1>Test text</h1>
        </div>
        <div class="col-md-6 table-col text-justify">
            <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis
                egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
                sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo.
                Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo
                    vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum
                rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar
                facilisis. Ut felis.</p>

        </div>

    </div>

</div>
<div class="container-fluid">

    <div class="row">
        <div class="col-md-12">
            <div class="followMeBar">a</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">b</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">c</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">d</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">e</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">f</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">g</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">h</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">i</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">j</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">k</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">l</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">m</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">n</div>
        </div>

    </div>

</div>

CSS

.table-container {
    display: table;
}

.table-container .table-row {
    height: 100%;
    display: table-row;
}

@media (min-width: 992px) {
    .table-container .table-row .table-col {
        height: 100vh;
        display: table-cell;
        float: none;
        vertical-align: middle;
        border: dashed #0f0f0f;
    }
}

.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}

/*Header*/

.fade {
    background-blend-mode: overlay;
    background: rgba(255, 255, 255, 1) url('https://www.gstatic.com/webp/gallery3/1.png') no-repeat center center;
    background-size: cover;
}

/*Sticky Header*/

.followMeBar {
    background: #222;
    border-bottom: solid 1px #111;
    border-top: solid 1px #444;
    padding: 1%;
    position: relative;
    z-index: 1;
    color: white;
}

.followMeBar.fixed {
    position: fixed;
    top: 0;
    width: 98%;
    z-index: 0;
}

.followMeBar.fixed.absolute {
    position: absolute;
}

因此，对于第一个淡出图像的容器，我必须使用

$(window).scroll(function () {
        var scroll_top = $(document).scrollTop() / 400;
        header.css("background-color", 'rgba(255,255,255,' + (1 - scroll_top) + ')');
    });

哪个，完美无缺。然后我对原来的笔帖进行了一些修改，并将它们组合起来并得到了

var header = $(".fade");

$(document).ready(function () {

    var newStickies = new stickyTitles($(".followMeBar"));

    newStickies.load();

    // Fades out the header image
    $(window).scroll(function () {
        var scroll_top = $(document).scrollTop() / 400;
        header.css("background-color", 'rgba(255,255,255,' + (1 - scroll_top) + ')');
    });

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

// Sticky header
function stickyTitles(stickies) {
    this.load = function () {
        stickies.each(function () {
            var thisSticky = $(this).wrap('<div class="followWrap" />');
            thisSticky.parent().height(thisSticky.outerHeight());
            $.data(thisSticky[0], 'pos', thisSticky.offset().top);
        });
    };

    this.scroll = function () {
        stickies.each(function (i) {
            var thisSticky = $(this),
                nextSticky = stickies.eq(i + 1),
                prevSticky = stickies.eq(i - 1),
                pos = $.data(thisSticky[0], 'pos');

            if (pos <= $(window).scrollTop()) {

                thisSticky.addClass("fixed");

                if (nextSticky.length > 0 && thisSticky.offset().top >= $.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {
                    thisSticky.addClass("absolute").css("top", $.data(nextSticky[0], 'pos') - thisSticky.outerHeight());
                }

            } else {

                thisSticky.removeClass("fixed");

                if (prevSticky.length > 0 && $(window).scrollTop() <= $.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) {
                    prevSticky.removeClass("absolute").removeAttr("style");
                }
            }
        });
    }
}

但是，followMeBar在向下滚动后会重复，我不知道为什么。我想这是Bootstrap的一个问题，那是因为当我删除Bootstrap时它工作正常。

完整代码 - ＆gt; https://jsfiddle.net/pzquzLxh/2/

帮助!!

Answer 1

将此规则添加到CSS中。 Bootstrap已将position: relative设置为所有col-*，因此您需要将其重置为static以关注页面流。

.col-md-12 {
    position: static !important;
}

参考文献：

https://www.w3schools.com/css/css_positioning.asp
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

var header = $(".fade");

$(document).ready(function () {

    var newStickies = new stickyTitles($(".followMeBar"));

    newStickies.load();

    // Fades out the header image
    $(window).scroll(function () {
        var scroll_top = $(document).scrollTop() / 400;
        header.css("background-color", 'rgba(255,255,255,' + (1 - scroll_top) + ')');
    });

    $(window).scroll(function () {
        newStickies.scroll();
    });
});

// Sticky header
function stickyTitles(stickies) {
    this.load = function () {
        stickies.each(function () {
            var thisSticky = $(this).wrap('<div class="followWrap" />');
            thisSticky.parent().height(thisSticky.outerHeight());
            $.data(thisSticky[0], 'pos', thisSticky.offset().top);
        });
    };

    this.scroll = function () {
        stickies.each(function (i) {
            var thisSticky = $(this),
                nextSticky = stickies.eq(i + 1),
                prevSticky = stickies.eq(i - 1),
                pos = $.data(thisSticky[0], 'pos');

            if (pos <= $(window).scrollTop()) {

                thisSticky.addClass("fixed");

                if (nextSticky.length > 0 && thisSticky.offset().top >= $.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {
                    thisSticky.addClass("absolute").css("top", $.data(nextSticky[0], 'pos') - thisSticky.outerHeight());
                }

            } else {

                thisSticky.removeClass("fixed");

                if (prevSticky.length > 0 && $(window).scrollTop() <= $.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) {
                    prevSticky.removeClass("absolute").removeAttr("style");
                }
            }
        });
    }
}

.col-md-12 {
  position: static !important;
}

.table-container {
    display: table;
}

.table-container .table-row {
    height: 100%;
    display: table-row;
}

@media (min-width: 992px) {
    .table-container .table-row .table-col {
        height: 100vh;
        display: table-cell;
        float: none;
        vertical-align: middle;
        border: dashed #0f0f0f;
    }
}

.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}

/*Header*/

.fade {
    background-blend-mode: overlay;
    background: rgba(255, 255, 255, 1) url('https://www.gstatic.com/webp/gallery3/1.png') no-repeat center center;
    background-size: cover;
}

/*Sticky Header*/

.followMeBar {
    background: #222;
    border-bottom: solid 1px #111;
    border-top: solid 1px #444;
    padding: 1%;
    position: relative;
    z-index: 1;
    color: white;
}

.followMeBar.fixed {
    position: fixed;
    top: 0;
    width: 98%;
    z-index: 0;
}

.followMeBar.fixed.absolute {
    position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div class="container-fluid table-container fade">

    <div class="row table-row">
        <div class="col-md-6 table-col text-center">
            <h1>Test text</h1>
        </div>
        <div class="col-md-6 table-col text-justify">
            <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis
                egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
                sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo.
                Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo
                    vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum
                rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar
                facilisis. Ut felis.</p>

        </div>

    </div>

</div>
<div class="container-fluid">

    <div class="row">
        <div class="col-md-12">
            <div class="followMeBar">a</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">b</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">c</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">d</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">e</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">f</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">g</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">h</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">i</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">j</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">k</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">l</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">m</div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="followMeBar">n</div>
        </div>

    </div>

</div>

在JQuery

1 个答案: