Question

所以我基本上从另一个问题复制了一些代码，用于改变滚动颜色的导航栏。就是这样：

$(document).ready(function(){       
 var scroll_start = 0;
 var startchange = $('#startchange');
 var offset = startchange.offset();
  if (startchange.length){
$(document).scroll(function() { 
   scroll_start = $(this).scrollTop();
   if(scroll_start > offset.top) {
       $(".navbar-default").css('background-color', '#f0f0f0');
    } else {
       $('.navbar-default').css('background-color', 'transparent');
    }
});
 }

}）;

这一切都运作良好（有必要的ID /类改变了课程），但我想知道它是如何工作的，因为我不知道。据我所知，这个代码基本上是在屏幕顶部滚动到#startchange顶部后更改导航栏的颜色。但事实上，我不确定所有的抵消和scrtollTop是做什么的。显然，我对JS / jQuery相当新。提前谢谢。

Answer 1

总结Offset（）和ScrollTop（）是JQuery函数。 JQuery只是一个Javascript函数库。 JS是您的浏览器解释的语言。

让我给你真正的定义：

偏移（）：获取相对于文档的匹配元素集中第一个元素的当前坐标。

SrollTop（）：获取匹配元素集中第一个元素的滚动条的当前垂直位置，或为每个匹配元素设置滚动条的垂直位置。

您的代码在文档准备就绪时执行函数。

$(document).ready(function(){

它由3个变量（var）支持。

 var scroll_start = 0;
 var startchange = $('#startchange');
 var offset = startchange.offset();

当活动'滚动'＆＃39;检测到文档中的代码调用了一个函数，该函数使用类＆＃39; navbar-default＆＃39;来更改元素的某些CSS属性。当满足条件并且您滚动的值高于具有id＆＃39; startchange＆＃39;的元素的偏移量。（#startchange）

$(document).scroll(function() { 
   scroll_start = $(this).scrollTop();
   if(scroll_start > offset.top) {
       $(".navbar-default").css('background-color', '#f0f0f0');
    } else {
       $('.navbar-default').css('background-color', 'transparent');
    }
});

以下是JQuery Documentation，您可以在其中查阅每个功能

快乐学习。快乐的编码。随意问你需要什么。

Navbar在滚动时改变颜色，这个jQuery如何工作？

1 个答案: