滚动到达锚点时使用 JQuery 更改 CSS 元素答案

【问题标题】：Change CSS element with JQuery when scroll reaches an anchor point滚动到达锚点时使用 JQuery 更改 CSS 元素
【发布时间】：2023-03-07 14:00:01
【问题描述】：

我目前有这个解决方案可以在页面到达某个点时更改 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"});
    }
});

这是当前状态：http://tibio.ch 谢谢，

【问题讨论】：

标签： jquery

【解决方案1】：

试试这个：

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

【讨论】：

这有一个底线——如果调整窗口大小，$targetOffset 将不准确。你可以使用$(window).resize()。如果你有去弹跳功能，你也应该使用它（见link）。
如果我有许多具有相同类的元素，所以我有一个每个（）的循环。我如何实现这一行 var targetOffset = $("#anchor-point").offset().top;每个@Vohuman？

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：