window.scroll不適用於「home」鍵和「＃」鏈接？

我有這個非常簡單（和長）的腳本來根據屏幕上的內容更改我的導航欄中的顏色。一切工作都很好，但當按下「home」鍵盤或點擊「＃」鏈接時，效果並不理想。我的腳本是這樣的：window.scroll不適用於「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") 
      });   
     } 
});

在這裏，我只貼我的長腳本，其中「一格」是網頁頂部的一部分。發生的事情是，當用戶使用瀏覽器的滾動條或方向鍵上下滾動時，它可以正常工作。但是，當用戶點擊徽標（鏈接到「＃」）或按下「主頁」按鈕時，它不會。例如，如果用戶在第五個div上並按下「Home」，則其行爲就好像用戶仍然在第五個div上一樣。
任何提示？問題在window.scroll？去「家」不被視爲滾動事件？我應該如何處理？

編輯：我發現，它唯一的瀏覽器工作沒有問題是Safari。 Chrome，Firefox和IE（所有這些版本的最新版本）給我帶來麻煩。

編輯/解決方案：@petkopalko提到的功能可能出現的問題後，我意識到這個問題是div的大小。我改變了腳本來檢查頂部div內的特定和更小的元素是否在屏幕上。現在它可以工作。

來源

2014-02-20 user3097405

這[小提琴]（http://jsfiddle.net/UJ872/1/）顯示滾動射擊回家按鍵和鏈接點擊兩者。在Chrome中進行測試。 – Bic

嗨。感謝您的答案，但不知何故，我什麼也沒有看到。在任何瀏覽器中都沒有記錄任何控制檯，我不知道爲什麼。 – user3097405

即使在＃鏈接或主鍵上，也會觸發window.scroll，在註釋中檢查jsfiddle，可能isScrolledIntoView函數有問題 - 我沒有檢查，但我認爲它更好地使用一些現成的解決方案：

如果您使用引導，您可以使用scrollspy plugin。

如果您不使用引導，您可以使用minimalistic scroll spy。或者嘗試谷歌滾動。

some code for SO to post this answer with jsfiddle

來源

2014-02-25 22:07:08 petkopalko

我沒有使用現成的解決方案，因爲有時編輯它們會有很多工作（我在示例中使用「顏色」更改以使其簡單和簡短，但我正在處理真實腳本中的形狀）。但由於你的評論，我檢查了isScrolledIntoView，我意識到問題是div的大小。有時它不會完全「進入視野」（在Safari中是因爲書籤欄的高度較小......）。所以，我改變了腳本來檢查一個特定的元素是否在屏幕上。現在它可以工作。所以，謝謝你指出問題可能在那裏。 – user3097405

window.scroll不適用於「home」鍵和「＃」鏈接？

回答

相關問題