滑下並修復標題

我坐在這裏創建我自己的小網站。對於我的第一個響應式佈局，我想在滾動200px後修正它，然後滑下我的標題。滑下並修復標題

我有這樣的代碼在這裏：

$(window).scroll(function(){ 
    var header = $('header'), 
     scroll = $(window).scrollTop(); 

    if (scroll >= 200) header.addClass('fixed'); 
    else header.removeClass('fixed'); 
});

爲200像素後固定頭。但是這個解決方案有點難。希望你能幫助我。感謝你的支持。

來源

2016-07-20 Marcel Funk

你是什麼「這個解決方案有點太難了」？它工作嗎？你的意思是你不知道如何實現它？ –

我的意思是說，標題apears直接並沒有淡入或滑落。我很難用英語解釋它。對不起:-( –

我想你可能會忘記將這個類添加到你的頭對象中。如果你有類=「頭」一個div，那麼你的變量聲明應該是：

var header = $('.header'),

這裏是一個link to a jsfiddle與此代碼工作的一個例子。

來源

2016-07-20 01:00:01

良好的捕獲 - 我錯過了我的回答+1 – gibberish

不，我'使用

所以這是正確的，你的解決方案看起來像我的，一些滾動頭後（在你的情況下.header）出現。這是我的問題，我希望header oder .header在200px的滾動和固定後從頂部向下滑動 –

我明白了，所以你想要一個動畫將標題向下滑動然後修復它？ –

這可能會給你一個開始。 請注意增加了一個布爾變量來限制類被添加/刪除的次數。

//javascript: 
//Define variables outside the scroll function 
var win = $(window), header = $('header'), isDown = false; 

win.scroll(function(){ 
    //This function fires thousands of times, so limit that 
    scrollpos = win.scrollTop(); 
    if (!isDown && scrollpos >= 200){ 
    header.addClass('fixed'); 
    isDown = true; 
    }else if (isDown && scrollpos < 200) 
    header.removeClass('fixed'); 
    isDown = false; 
    } 
}); //END window.scroll 


<!-- HTML --> 
<!-- Remember to add the jQuery library (just above `</body>` in document) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

來源

2016-07-20 01:05:29 gibberish

嗨，感謝您的幫助，但這不工作？！ –

請不要說'不行'。這不是很好的調試。它有什麼作用？ –

你是對的蒂姆，那不是很有幫助。但我什麼都看不到。我將代碼添加到我的，當我向下滾動時，沒有固定標題或其他任何內容。 –

滑下並修復標題

回答

相關問題