當滾動到達定位點時用JQuery更改CSS元素

我目前有這個解決方案來在頁面到達特定點時更改css元素，但我想使用＃錨點而不是像素值（1804 ）在較小的屏幕上進行響應。我知道這一定是容易的，但我怎麼也找不到：當滾動到達定位點時用JQuery更改CSS元素

$(document).scroll(function(){ 
    if($(this).scrollTop() > 1804) 
    { 
     $('#voice2').css({"border-bottom":"2px solid #f4f5f8"}); 
     $('#voice3').css({"border-bottom":"2px solid #2e375b"}); 
    } 
});

這是當前的狀態：http://tibio.ch 謝謝

來源

2012-05-11 anoonimo

試試這個：

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 { 
     // ... 
    } 
});

來源

2012-05-11 17:32:40 undefined

它的工作原理，謝謝 – anoonimo

這有一個地板 - 如果窗口調整大小，$ targetOffset將不準確。你可以使用'$（window）.resize（）'。如果你有一個去彈跳功能，你也應該使用它（參見[link]（https://github.com/cowboy/jquery-throttle-debounce））。 –

如果我有很多元素與相同的類，所以我有每個（）循環。我如何實現這一行var targetOffset = $（「＃anchor-point」）。offset（）。top;每個@Vohuman？ –

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

解決方案基於：http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

來源

2012-05-11 17:50:18 ckaufman

$(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(); 
    }   
});

來源

2015-09-03 15:06:36

當滾動到達定位點時用JQuery更改CSS元素

回答

相關問題