当页面到达id时如何设置js动作？

Question

嗯，事情真的很简单，我是js上的newbi，几乎什么都不知道，问题是我想改变导航栏的风格，但是当它达到特定数量时我就可以做到像素，我想在它到达页面的下一个div id时进行更改，这是代码：

$(window).scroll(function() {    
  var scroll = $(window).scrollTop();

  if (scroll >= 500) {
    $(".fondoa").addClass("fondoazul");
  } else {
    $(".fondoa").removeClass("fondoazul");
  }
});

非常感谢你的帮助

Answer 1

您可以使用以下方法找出div元素顶部的距离：

$("#divid").offset().top

您可以在到达元素时使用它来添加类：

$(window).scroll(function() {
  var idLocation = $("#divid").offset().top
  var scroll = $(window).scrollTop();

  if (scroll >= idLocation) {
    $(".fondoa").addClass("fondoazul");
  } else {
    $(".fondoa").removeClass("fondoazul");
  }
});

Answer 2

你可以使用javascript进行此操作，下面的jquery是示例

//for getting window height

var win_height = $(window).height();
//if(win_height)
console.log(win_height)

//for getting window id and scrolling to it via javascript
function scrollWin() {
    document.getElementById('five').scrollIntoView()
}


//for getting window id and scrolling to it using jquery
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( window ).scroll(function() {
  $( "#five" ).css( "display", "inline" ).fadeOut( "slow" );
});

body {
    width: 6000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="scrollWin()">Click me to scroll</button>
<br>
<br>

<p></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p></p>

<br>
<br>
<br>
<p >500 500 500 500 500 500 500 500 500 500 500 500 500 500 <span id="five">Scroll happened!</span></p><br>
<br>
<br>
<br>
<br>
<br>

<br>
<br>
<br>
<br>
<br>
<br>
<br>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>