如何使元素在屏幕頂部50px處變得固定

-4

我有一個可以與頁面一起滾動的html div元素，但是我希望一旦它從屏幕頂部到達50px，它就會被修復。
這是如何完成的？
我的分辨率是#box
謝謝！
-Ina如何使元素在屏幕頂部50px處變得固定

來源

2016-04-15 Ina

嘗試尋找一些JavaScript庫或教程 – Mustaghees

@Ina沒有我的答案的工作？ http://stackoverflow.com/a/35953045/2813224 – zer00ne

對downvote感到抱歉 - 但這個問題很容易研究，並有一些可用的答案。您需要研究在您提出問題之前使用的選項。 – gavgrif

如果您希望將其固定在距離頂部一定距離的頁面頂部，您可以檢查該元素的頂部偏移量，並在達到您想要的距離時更改該類別。

這裏是供您參考的jQuery代碼

jQuery(document).scroll(function() { 

     var documentTop = jQuery(document).scrollTop(); 
     console.log('this is current top of your document' + documentTop); 
     //box top is 891 
     if (documentTop > 841) { 
      //change the value of the css at this point 
      jQuery("#box").addClass("stayfix"); 
     } 
     else   
     { 
      jQuery("#box").removeClass("stayfix"); 
     } 

});

您需要更具體地說明您到目前爲止所做的工作。例如，你是如何讓div元素在頁面內滾動的。使用css或js/jquery動畫功能？這將有助於我們給出更具體的答案。

**編輯根據你的小提琴。

來源

2016-04-15 01:55:44

我無法得到這個工作。 navbarInitialTop在滾動時不會更改。 – JazZ

給我小提琴，我會爲你檢查它。 –

@YoYo這裏是一個鏈接到jsfiddle https://jsfiddle.net/Ina_/aw3gcajb/任何幫助將非常感謝，因爲我已經嘗試了每個答案，我可以在網上找到，但沒有任何工作！ – Ina

-1

嘗試類似這樣的事情。這是一個使用jquery（希望不是問題）的解決方案，每次頁面滾動時都會檢查頁面的scrollHeight。如果scrollHeight大於某個閾值，則該元素變得固定。如果沒有，元素的相對定位（但你可以做任何你在這種情況下想要的。

$(document).ready(function() { 
    var navFixed = false; 
    var $box = $("#box"); 
    var topHeight = 50; 

    $(document).scroll(function() { 
    if ($(document).scrollTop() >= topHeight && !navFixed) { 
     $box.css("position", "fixed"); 
     navFixed = true; 
    } 
    else if ($(document).scrollTop() < topHeight && navFixed) { 
     $box.css("position", "relative"); 
     navFixed = false; 
    } 
    }); 
});

你將不得不寫一些額外的CSS針對#box元素，它告訴它什麼座標你也喜歡被固定爲

來源

2016-04-15 01:54:20 Sean

對不起，爲什麼downvote？ – Sean

因爲在添加固定位置之前您必須考慮#box div的偏移量。這裏是你的代碼的小提琴：https://jsfiddle.net/LezLa8eh/ 另外，因爲...我很嫉妒，我想要一樣的帽子！ ; ） – JazZ

他們是對的，這個問題是重複的。這是我用論壇的答案所做的代碼。

var box_top = $("#box").offset().top; 
$(window).scroll(function (event) { 
    if ($(window).scrollTop() >= (box_top - 50)) { 
    $("#box").css({position:"fixed",top:"50px"}); 
    } else { 
    $("#box").css({position:"relative"}); 
    } 
});

無論如何希望它有幫助。

https://jsfiddle.net/ay54msd5/1/

來源

2016-04-15 02:18:22 JazZ

如何使元素在屏幕頂部50px處變得固定

回答

相關問題