Question

我想创建一个导航栏，随着页面向下滚动而改变，类似于techcrunch.com上的页面

我不想只留下一个粘贴的标题，我知道如何在CSS中做到这一点。但是我也想在滚动到某个点之后改变它的高度和嵌套在其中的对象的样式。

我已经做了一些研究，大多数人都说应该使用.scroll函数或类似的东西在jQuery中完成，但我没有找到关于如何做到这一点的完整解释。说实话，我对jQuery或Javascript不是很熟悉。

我发现类似问题的所有答案都不允许我编辑或更改标题中的嵌套内容，只会更改标题本身的样式。 如果有人能够在某些细节上为我解释这个过程，我将不胜感激。我真的想学习如何做到这一点，而不仅仅是复制一些代码并将其粘贴到我的网站中。

Answer 1

这是一个通用解决方案。

这涉及到多个标题（内部可能有完全不同的内容），您可以根据滚动位置选择性地显示一个标题。每个标题元素都有一个data-visible-range属性，用于定义应显示的最小和最大滚动位置。

演示：http://jsfiddle.net/cydfh2s6/1/

<强> HTML

<div class="header header-1" data-visible-range="0-100">Header 1</div>
<div class="header header-2" data-visible-range="101-500">Header 2</div>
<div class="header header-3" data-visible-range="501-">Header 3</div>
<div class="body">BODY</div>

<强> CSS

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
}
.header-1 {
    background-color: yellow;
    display: block; /* header 1 is visible by default */
}
.header-2 {
    background-color: red;
}
.header-3 {
    background-color: green;
}
.body {
    padding-top: 50px;
    height: 2000px;   
}

<强> JS

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    var headerToDisplay = false;
    $('.header[data-visible-range]').each(function() {
        var range = $(this).data('visible-range').split('-');
        range[0] = range[0] ? parseInt(range[0], 10) : 0;
        range[1] = range[1] ? parseInt(range[1], 10) : $(document).height();
        if(scrollTop >= range[0] && scrollTop <= range[1]) {
            headerToDisplay = $(this);
            return false;
        }
    });
    if(headerToDisplay && !headerToDisplay.is(':visible')) {
        $('.header[data-visible-range]').hide();
        headerToDisplay.show();
    }
});

Answer 2

在这个例子中，我在滚动

上添加了类

请参阅此示例：http://jsfiddle.net/kevalbhatt18/twn3gs75/

听说我们可以像点击一样收听滚动事件，所以当你滚动它时将进入 $(window).scroll(function() { ----Call---- }); 现在就在这里 function（）{}将检查它将滚动多少1或2或3 ...等所以取决于那将在我的代码中应用条件我检查是否用户滚动＆gt; 1然后申请css。

$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});

如何创建在向下滚动页面时更改的标题？

2 个答案: