当滚动到达锚点时使用 JQuery 更改 CSS 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10555998/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change CSS element with JQuery when scroll reaches an anchor point
提问by anoonimo
I currently have this solution to change the css elements when the page reaches a certain point but I'd like to use an #anchor-point instead of the pixel value (1804) to be responsive on smaller screens. I know it must be easy but I can't find how:
我目前有这个解决方案来在页面到达某个点时更改 css 元素，但我想使用 #anchor-point 而不是像素值 (1804) 在较小的屏幕上做出响应。我知道这一定很容易，但我找不到方法：
$(document).scroll(function(){
if($(this).scrollTop() > 1804)
{
$('#voice2').css({"border-bottom":"2px solid #f4f5f8"});
$('#voice3').css({"border-bottom":"2px solid #2e375b"});
}
});
This is the current state: http://tibio.chThank you,
这是当前状态：http: //tibio.ch谢谢，
回答by undefined
Try this:
尝试这个：
var targetOffset = $("#anchor-point").offset().top;
var $w = $(window).scroll(function(){
if ( $w.scrollTop() > targetOffset ) {
$('#voice2').css({"border-bottom":"2px solid #f4f5f8"});
$('#voice3').css({"border-bottom":"2px solid #2e375b"});
} else {
// ...
}
});
回答by Santonu Buragohain
$(window).bind("scroll", function() {
var $sec1 = $('.bg1').offset().top;
var $sec2 = $('.bg2').offset().top;
var $sec3 = $('.bg3').offset().top;
var $sec4 = $('.bg4').offset().top;
var $sec5 = $('.carousel-indicators').offset().top;
if ($(this).scrollTop() < $sec2){
$(".navbar1").fadeOut();
$(".navbar2").fadeOut();
$(".navbar3").fadeOut();
}
if ($(this).scrollTop() > $sec2 & $(this).scrollTop() < $sec3){
$(".navbar1").fadeIn();
$(".navbar2").fadeOut();
}
if ($(this).scrollTop() > $sec3 & $(this).scrollTop() < $sec4){
$(".navbar2").fadeIn();
$(".navbar3").fadeOut();
}
if ($(this).scrollTop() > $sec4 & $(this).scrollTop() < $sec5){
$(".navbar3").fadeIn();
$(".navbar2").fadeOut();
}
if ($(this).scrollTop() > $sec5){
$(".navbar1").fadeOut();
$(".navbar2").fadeOut();
$(".navbar3").fadeOut();
}
});
回答by ckaufman
function scroll_style() {
var window_top = $(window).scrollTop();
var div_top = $('#anchor-point').offset().top;
if (window_top > div_top){
$('#voice2').css({"border-bottom":"2px solid #f4f5f8"});
$('#voice3').css({"border-bottom":"2px solid #2e375b"});
}
}
$(function() {
$(window).scroll(scroll_style);
scroll_style();
});
Solution based on: http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html
解决方案基于：http: //blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html
