向下滚动时标题会发生变化（jQuery）

Question

TechCrunch最近重新设计了他们的网站，他们有一个甜蜜的标题，当你向下滚动时，它会缩小为品牌的更薄版本。

你可以在这里看到我的意思：http://techcrunch.com/

我如何创造这样的东西？是否在任何地方都有教程，如果没有，你可以帮助我一些关于从哪里开始的提示吗？ ：）

Answer 1

这不是太难，只是一个简单的.scroll()事件。 由于面板的定位方式，我似乎无法做小提琴 检查编辑！。但基本上你所拥有的是div顶部position: absolute所以它始终位于顶部，然后使用.scroll()

$("body").scroll( function() {
    var top = $(this).scrollTop();
    // if statement to do changes
});

scrollTop()方法用于确定body滚动了多少。

根据您希望更改标题div的位置，您可以让if语句做很多事情。对于您提供的示例，它将类似于

if ( top > 147 )
    // add the TechCrunch div inside the header
else
    // hide the TechCrunch div so that space is transparent and you can see the banner

编辑

耶！我能够让this fiddle来展示这个例子！ ：）

祝你好运！

Answer 2

老问题，但我最近遇到了这个问题，这里接受的解决方案无法正常工作，因为我的div的高度没有固定，所以简而言之就是我遇到的解决方案。

JSfiddle： http://jsfiddle.net/Lighty_46/27f4k/12/

$(document).ready(function () {

var bluebutton = $('#blue_link').offset().top - parseFloat($('#blue_link').css('marginBottom').replace(/auto/, 0));

var bluebuttonbottom = $('#blue_block_bottom').offset().top - $('#main_nav').height() - parseFloat($('#blue_link').css('marginBottom').replace(/auto/, 0));

$(window).scroll(function (event) {
    // what the y position of the scroll is
        var y = $(this).scrollTop();

    // whether that's below the top of the div
        if (y >= bluebutton) {

    // if so, ad the fixed class
        $('.home_nav').addClass('blue_selected');

}

    // whether you have passed the bottom of the div
        if (y >= bluebuttonbottom) {

    // if so remove the selected class
        $('.home_nav').removeClass('blue_selected');

        } else {

    // otherwise remove it
        $('.home_nav').removeClass('blue_selected');
}

});
});

基本上，

• $（'＃blue_link'）是我想要触发课程更改的顶级div
• $（'＃blue_block_bottom'）是我想要触发类删除的div
• $（'＃main_nav'）是我的固定标题

因此，当我的标题的底部到达div的顶部时，类“blue_selected”将应用于“.home_nav”.....然后如果div的底部通过标题的底部，则“ blue_selected“已从”.home_nav“中删除。

您需要为每个按钮重复此操作，并使用各自的div

我已经在Chrome，Firefox和IE 10到8中进行过测试（在8中工作，但小提琴稍微突破）。

希望这会有所帮助，它可能不是以诚实的方式做到这一点的最佳方式，它可能在某处有一些错误，但它是我工作的唯一一个。

Answer 3

查看此Floating Divs

您正在寻找的是您需要将Div定义为浮动Div，然后每当您滚动时它始终保留在页面上。在Techcrunch中，他们的标题位于中心顶部，所以它始终保持在那里

Answer 4

这是一个想法

• 绑定到document.body.onscroll事件
• onscroll检查滚动位置。如果不在顶部，请更换栏中的图像
• 如果它在顶部，则显示另一个图像

Answer 5

$(window).on("scroll", function () {
    if ($(this).scrollTop() > 100) {
        $("#header").addClass("not-transparent");
    }
    else {
        $("#header").removeClass("not-transparent");
    }
});

Answer 6

虽然之前的答案似乎是一个完美的解决方案，但TechCrunch似乎使用z-index和固定定位来实现此滚动效果。

从上图中可以看出，大小标题都在屏幕上，如果不调整jQuery滚动事件就不会发生这种情况。

Answer 7

将以下代码用于我的工作

<script src='js/jquery-1.9.1.min.js' type="text/javascript"></script>
<script>
    $(document).on("mobileinit", function() {

        $.mobile.fixedtoolbar.prototype.options.tapToggle = false;
        $.mobile.fixedtoolbar.prototype.options.hideDuringFocus = "";

    });
</script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>