Question

我有这个非常简单（和很长）的脚本来根据屏幕上的内容更改导航栏中的颜色。一切都很好，但不是在按下“home”键盘或点击“＃”链接时。我的脚本是这样的：

function isScrolledIntoView(elem){
 var docViewTop = $(window).scrollTop();
 var docViewBottom = docViewTop + $(window).height();

 var elemTop = $(elem).offset().top;
 var elemBottom = elemTop + $(elem).height();

 return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
 && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );}

$(window).scroll(function () {
       isOnScreen = isScrolledIntoView("#second-div");
       isOnTopPage = isScrolledIntoView("#first-div");
       if(isOnScreen){
          $(".navbar .navbar-collapse > ul > li > a.item").mouseenter(function() {
          $(this).css("color", "black")
          });
          $(".navbar .navbar-collapse > ul > li > a.item").mouseleave(function() {
          $(this).css("color", "white")
          });          
       }
       if(isOnTopPage){
          $(".navbar .navbar-collapse > ul > li > a.item").mouseenter(function() {
          $(this).css("color", "blue")
          });
          $(".navbar .navbar-collapse > ul > li > a.item").mouseleave(function() {
          $(this).css("color", "white")
          });          
       }
});

在这里，我只发布了我的长脚本的一部分，其中“first-div”是网页的顶部。发生的事情是，当用户使用浏览器的滚动条或箭头键向上和向下滚动时，它可以正常工作。但是，当用户点击徽标（链接到“＃”）或按下“主页”按钮时，它不会。例如，如果用户在第五个div上并按下“Home”，则表现为用户仍然在第五个div上。
任何提示？问题是window.scroll吗？去“家”不被视为滚动事件？我该如何处理？

编辑：我发现唯一没有问题的浏览器就是Safari。 Chrome，Firefox和IE（所有这些版本的最新版本）给我带来了麻烦。

编辑/解决方案：在@petkopalko提到函数中可能存在的问题之后，我意识到问题是div的大小。我更改了脚本以检查顶部div中的特定和更小的元素是否在屏幕上。现在它有效。

Answer 1

window.scroll甚至在#link或home键上被触发，在注释中检查jsfiddle，可能是你的isScrolledIntoView函数有问题 - 我没有检查，但我认为它更好地使用一些现成的解决方案：

如果您使用bootstrap，则可以使用scrollspy plugin。

如果您不使用引导程序，则可以使用minimalistic scroll spy。或者尝试google scrollspy。

some code for SO to post this answer with jsfiddle

window.scroll不适用于“home”键和“＃”链接？

1 个答案: