Question

我一直试图弄清楚如何在几个小时内完成这项工作，并且不会比我开始时更接近。

<div class="container">
    <div class="fixed-top-bar"></div>
    <div class="scrolling-bottom-bar"></div>
</div>

我要做的事情有3位。

fixed-top-bar总是fixed（当然很容易）

scrolling-bottom-bar最初位于fixed-top-bar下方（再次轻松添加偏移量，例如上边距）。

然而，这是我坚持的一点。 container（或设计的最低部分）底部有一个阴影表示它已升高。最初这个阴影位于scrolling-lower-bar之下，但是当它消失在视野之外时，阴影仍然粘在固定的顶部条上。

我不确定这是否可以用html/css完成，或者它需要一些js。这里有一个例子来说明我一直试图复制的内容。

example

Answer 1

你需要使用javascript 像这样的东西：

$(window).scroll(function() {     
    var scroll = $(window).scrollTop();
    if (scroll > 0) {// you can add the height of your header
        $(".fixd-top").addClass("active");
    }
    else {
        $(".fixd-top").removeClass("active");
    }
});




  CSS

    .fixed-top.active {
         box-shadow: 0 0 10px rgba(0,0,0,0.4);   
    }

Answer 2

如果使用检查器（f12）检查源代码，则会在向下滚动时看到css在某个元素中发生更改。这个更改必须完成一些javascript代码，当用户向下滚动时指示。

Answer 3

尝试使用scrollTop属性来检查垂直滚动，同样的属性在jquery中。

或者您可以使用已编写的库，例如Bootstrap Affix或ScrollToFixed

粘在Sticky标题上

3 个答案: