顯示不同的標識

-1

網址：http://94.23.211.70/~cairngorm/顯示不同的標識

我試圖執行的任務是改變標誌當導航切換到上滾動固定標題導航。我試圖使用我已經通過谷歌和這裏研究的JavaScript，但似乎沒有點擊，也許我是邊緣接近解決它，但我不知道。

當你訪問你會看到每個導航兩個標識的鏈接，我想知道是否有可能有顯示：無如這可能在一個非常簡單的格式，解決了這個想法。如果我不能通過CSS來做到這一點，我想知道是否有一種方法可以實現顯示：通過頁面內的內聯樣式，沒有任何方法，因爲它是靜態的，很容易實現。

我已經嘗試了各種方法，但只是在隧道盡頭沒有燈光，所以除非強烈建議使用JavaScript或其他方法，否則我會很感激這方面的任何輸入。

開發

來源

2016-01-13 Dev

歡迎SO。請訪問[幫助]，看看有什麼和如何問。提示：顯示工作量和代碼 – mplungjan

http://stackoverflow.com/questions/14283205/jquery-window-scrolling-event – mplungjan

好吧，這個問題的人是1.不錯，閱讀它。它清楚地解釋他想要什麼，以及如何做到這一點，1。CSS或JavaScript的2對不起 – Persijn

從我可以在您的問題中收集的內容中，您希望導航中的徽標根據用戶滾動到的位置進行更改。

如果他們在英雄橫幅上，然後顯示白色邊緣徽標，如果他們已經滾動然後顯示黑色邊緣徽標。

這需要的JavaScript和jQuery的一點點，應該給你你想要的輸出

$(document).ready(function() { 
    function checkScroll() { 
    // check if the header has changed to be sticky 
    if($('header').hasClass('sticky-open')) { 
     // hide all logos 
     $('.fly-wrap-logo a').hide(); 
     // only show the last logo (the one with the black edge) 
     $('.fly-wrap-logo a:last-child').show(); 
    } else { 
     // hide all logos 
     $('.fly-wrap-logo a').hide(); 
     // only show the first logo (the one with the white edge) 
     $('.fly-wrap-logo a:first-child').show(); 
    } 
    } 
    // Run on ready 
    checkScroll(); 

    // Run when the page is scrolled 
    $(document).scroll(function() { 
    checkScroll(); 
    }); 
});

來源

2016-01-13 11:04:41 Stewartside

考慮的功能有兩個頁面加載並在頁面滾動我想最好還是讓它有其自身的功能運行的數量。 – Stewartside

也是一個很好的答案，謝謝你。我已經嘗試了兩種方法，兩者都工作得很好，但是由於我沒有在浮動的新導航開始時使用白色標誌，因此這一點更勝一籌。 – Dev

查看temp URL Stewartside是否有幫助，但是當您向後滾動時，它會粘上黑色徽標。有沒有辦法將主導航恢復爲白色？ – Dev

試試這個功能& CSS

功能

$(document).ready(function() { 
    if($('header').hasClass('sticky-open')) { 
      $('.fly-wrap-logo a:first-child').hide(); 
      $('.fly-wrap-logo a:last-child').show(); 
     } 

     else { 
      $('.fly-wrap-logo a:first-child').show(); 
      $('.fly-wrap-logo a:last-child').hide(); 
     } 
});

CSS

.fly-wrap-logo a:last-child{display:none;}

儘量只CSS沒有jQuery的

.fly-wrap-logo a{display:none;} 
header .fly-wrap-logo a:first-child{display:inline;} 
header.sticky-open .fly-wrap-logo a:first-child{display:none;} 
header.sticky-open .fly-wrap-logo a:last-child{display:inline;}

來源

2016-01-13 11:01:56

是的，工作很好。感謝您花時間幫忙。意味着很多，拉爾吉！ – Dev

我已將其上傳到FTP，因此您可以查看該網址以便親自查看。當固定導航進場時，白色標誌存在一小段時間，然後進入黑色標誌。我對JavaScript不太懂，但我認爲365和366與分類有關？也許我錯了。 – Dev

這是因爲上面的函數基於滾動位置，而不是基於類。你可以只改變，當它改變了標誌 – Stewartside

顯示不同的標識

回答

相關問題