向下滚动时标题会发生变化 (jQuery)

Header changes as you scroll down (jQuery)

提问by SamY

TechCrunch recently redesigned their site and they have a sweet header that minifies into a thinner version of their branding as you scroll down.

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

You can see what I mean here: http://techcrunch.com/

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

How would I go about creating something like this? Is there a tutorial anywhere and if not, can one you kind souls give me some tips on where to start? :)

我将如何去创造这样的东西？是否有任何地方有教程，如果没有，你能不能给我一些关于从哪里开始的提示？:)

回答by vinceh

It's not too hard, it's just a simple .scroll()event. I can't seem to do it in fiddle because of the way the panels are positionedCheck EDIT!. But basically what you have is have a divon the top that is position: absoluteso it's always on top, then use .scroll()

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

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

The scrollTop()method is used to determine how much the bodyhas scrolled.

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

And depending on where you would like to change your header div, you can have your ifstatement do many things. In the case of the example you provided, it would be something like

根据您想要更改标题 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

EDIT

编辑

Yay! I was able to make this fiddleto demonstrate the example! :)

好极了！我能够制作这个小提琴来演示这个例子！:)

Good luck!

祝你好运！

回答by Lighty_46

Old question but I recently ran into this problem and the accepted solution on here wouldnt work because the height of my div's weren't fixed, so in short here is the solution I came across.

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

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

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');
}

});
});

SO basically,

所以基本上，

• $('#blue_link')was the top div I wanted to to trigger the class change
• $('#blue_block_bottom')was the div I wanted to to trigger the class removal
• $('#main_nav')was my fixed header

• $('#blue_link')是我想要触发类更改的顶级 div
• $('#blue_block_bottom')是我想要触发类删除的 div
• $('#main_nav')是我的固定标题

So when the bottom of my header reaches the top of the div, the class "blue_selected" is applied to ".home_nav" ..... then if the bottom of the div passes the bottom of the header the class "blue_selected" is removed from ".home_nav".

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

You will need to repeat this for each of your buttons with their respective div's

您将需要为每个带有各自 div 的按钮重复此操作

I have tested it in Chrome, Firefox and IE 10 to 8 (works in 8 but the fiddle breaks slightly).

我已经在 Chrome、Firefox 和 IE 10 到 8 中对其进行了测试（在 8 中工作，但小提琴稍微中断）。

Hope this helps, it probably isn't the best way to do it in all honesty and it probably has some errors in there somewhere but it was the only one I got working.

希望这会有所帮助，老实说，这可能不是最好的方法，它可能在某处有一些错误，但它是我唯一工作的方法。

回答by Prasanna

Check out this Floating Divs

看看这个Floating Divs

What you are looking is for is that you need to define a Div as floating Div and then it always stays on the page whenever you scroll. In Techcrunch they are having their headers in the Center top and so it always stays there

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

回答by Mrchief

Here's one idea

这是一个想法

• Bind to document.body.onscrollevent
• onscrollcheck for the scroll position. if is not at top, replace the image at the bar
• if it as at top, display the other image

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

回答by Ahmer

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

回答by sharma_kunal

Use the below code its work on my side

使用下面的代码它在我身边的工作

<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>

回答by Dan Bovey

Although the answers before seem a perfect solution, it appears that TechCrunch use z-index and fixed positioning to make this scroll effect.

虽然之前的答案看起来是一个完美的解决方案，但似乎 TechCrunch 使用 z-index 和固定定位来制作这种滚动效果。

As you can see from the image above, both the large and small header are both on the screen and this wouldn't happen without tweaking the jQuery scroll event.

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