滾動過去標題後出現圖像 - 嘗試不起作用？

Question

我最近接管了朋友的網站here。我想讓描述框上方的小徽標僅在用戶滾動過去（並隨後隱藏）頂部的大標題時才顯示出來，並且如果用戶再次滾動過去，則會再次消失。我已經嘗試過在這些其他帖子中推薦的方法here和here，這些方法看起來像是一樣的基本想法，但我無法讓他們工作。

我是新來的任何東西，一切的腳本（這我完全相信這裏是最大的問題，我知道了。）所以任何幫助表示讚賞，因爲什麼，我顯然是做錯了。

Answer 1

開始通過給<div class="fixeddiv">一個style="display: none"。然後添加以下內容（因爲您已經使用jQuery）：

$(document).ready(function() { 
    var contentOffset = getOffset(); 

    function getOffset() { 
     var allOffsets = $("div#content").offset(); 
     return allOffsets.top; 
    } 

    $(window).resize(function() { 
     contentOffset = getOffset(); 
    }); 

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

     if (windowTop > contentOffset) { 
      $("div.fixeddiv").show(); 
     } else { 
      $("div.fixeddiv").hide(); 
     } 
    }); 
}); 

這是代碼的作用。當文檔加載完成後，它會從文檔的頂部（偏移量）獲取「content」div的像素數量。它在窗口重新調整大小時再次執行此操作。然後，當某人向上或向下滾動時，它會獲得已經隱藏在滾動上方的像素數（scrollTop）。如果隱藏像素的數量大於窗口頂部#content div的偏移量，那意味着我們已經滾動過內容div的頂部，並應顯示圖標。否則，我們應該隱藏圖標。