Thay đổi tiêu đề khi bạn cuộn xuống (jQuery)

Question

TechCrunch gần đây đã thiết kế lại trang web của họ và họ có tiêu đề ngọt ngào giúp rút gọn phiên bản thương hiệu của họ khi bạn cuộn xuống.

Bạn có thể xem những gì tôi muốn nói ở đây: http://techcrunch.com/

Làm thế nào tôi sẽ đi về việc tạo ra một cái gì đó như thế này? Có một hướng dẫn ở bất cứ nơi nào và nếu không, có thể một trong những bạn loại linh hồn cho tôi một số lời khuyên về nơi để bắt đầu? :)

Answer 1

Nó không quá khó, nó chỉ là một sự kiện đơn giản .scroll(). Tôi dường như không thể làm điều đó trong fiddle vì cách các tấm được định vị Kiểm tra EDIT!. Nhưng về cơ bản những gì bạn có là có một div trên đỉnh đó là position: absolute vì vậy nó luôn luôn trên đầu, sau đó sử dụng .scroll()

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

Phương pháp scrollTop() được sử dụng để xác định bao nhiêu body đã cuộn.

Và tùy thuộc vào nơi bạn muốn thay đổi div tiêu đề của mình, bạn có thể có câu hỏi if làm nhiều việc. Trong trường hợp ví dụ mà bạn cung cấp, nó sẽ là một cái gì đó giống như

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! Tôi đã có thể thực hiện this fiddle để minh họa ví dụ! :)

Chúc bạn may mắn!

Answer 2

Check-out này Floating Divs

gì bạn đang tìm kiếm là cho là bạn cần phải xác định một Div như Div nổi và sau đó nó luôn luôn nằm trên trang bất cứ khi nào bạn di chuyển. Trong Techcrunch họ đang có tiêu đề của họ trong top Trung tâm và vì vậy nó luôn luôn vẫn có

Answer 3

Dưới đây là một ý tưởng

• Bind to document.body.onscroll kiện
• onscroll kiểm cho các vị trí cuộn. nếu không muốn nói là ở phía trên, thay thế hình ảnh tại quầy bar
• nếu nó như ở trên, hiển thị hình ảnh khác

Answer 4

Mặc dù câu trả lời trước đây có vẻ là giải pháp hoàn hảo, có vẻ như TechCrunch sử dụng chỉ mục z và định vị cố định để tạo hiệu ứng cuộn này.

Như bạn có thể nhìn thấy từ hình trên, cả hai tiêu đề lớn và nhỏ đều trên màn hình và điều này sẽ không xảy ra mà không cần tinh chỉnh các sự kiện cuộn jQuery.

Answer 5

Câu hỏi cũ nhưng gần đây tôi đã gặp phải vấn đề này và giải pháp được chấp nhận ở đây sẽ không hoạt động vì chiều cao của div của tôi không cố định, vì vậy trong ngắn hạn đây là giải pháp tôi đã gặp.

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 về cơ bản,

• $ ('# blue_link') là div đầu tôi muốn để kích hoạt sự thay đổi lớp
• $ ('# blue_block_bottom') là div tôi muốn kích hoạt loại bỏ lớp học
• $ ('# main_nav') là tiêu đề cố định của tôi

Vì vậy, khi phía dưới tiêu đề của tôi đạt đến đỉnh của div, lớp "blue_selected" được áp dụng cho ".home_nav" .. ... sau đó nếu phần dưới của div vượt qua phần dưới cùng của tiêu đề thì lớp "blue_selected" bị xóa khỏi ".home_nav".

Bạn sẽ cần phải lặp lại điều này cho mỗi nút của bạn với div tương ứng của họ

Tôi đã thử nghiệm nó trong Chrome, Firefox và IE 10-8 (công trình trong 8 nhưng vỡ fiddle hơi). Hy vọng điều này giúp, nó có lẽ không phải là cách tốt nhất để làm điều đó trong tất cả sự trung thực và nó có thể có một số lỗi trong đó một nơi nào đó nhưng nó là người duy nhất tôi đã làm việc.

Answer 6

Sử dụng mã dưới đây công việc của mình đứng về phía tôi

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

Answer 7

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