स्क्रॉल करते समय ब्राउज़र विंडो के शीर्ष पर ऑब्जेक्ट को ठीक करें

मैंने हाल ही में नए जीमेल में और एक HTML5 बिंग पूर्वावलोकन में एक नई रोचक सुविधा देखी जो स्क्रॉल करते समय ब्राउज़र विंडो के शीर्ष पर नेविगेशन बार को ठीक करता है। बार पृष्ठ के नीचे 100px शुरू हो सकता है लेकिन जब आप स्क्रॉल करते हैं और यह ब्राउज़र विंडो के शीर्ष तक पहुंच जाता है, तो यह तब तक ठीक हो जाता है जब तक कि आप ऊपर की ओर स्क्रॉल न करें, जहां मूल रूप से स्थित था।स्क्रॉल करते समय ब्राउज़र विंडो के शीर्ष पर ऑब्जेक्ट को ठीक करें

मेरा प्रश्न है; मैं इस प्रभाव को कैसे कर सकता हूं या इस प्रभाव के समान कुछ कर सकता हूं?

मुझे आशा है कि आप मेरे प्रश्न और मैं वर्णन करने की कोशिश कर रहा हूं।

स्रोत

2011-08-08 Cosmo Posmo

को div की स्थिति की स्थापना करके आप तत्व आगे पृष्ठ पर नीचे शुरू करने के लिए चाहते हैं, तो शीर्ष पर तय रहने नीचे स्क्रॉल करने के रूप में, यह एक अच्छी शुरुआत हो सकती है:

http://jsfiddle.net/cc48t/

स्रोत

2011-08-08 10:53:57

यह समाधान हर ब्राउज़र में बहुत झटकेदार झिलमिलाहट करता है। अधिकांश आधुनिक ब्राउज़र 'स्थिति: फिक्स्ड' का समर्थन करते हैं जो इसे करने का बेक्ड-इन सीएसएस तरीका है। – sohtimsso1970

हां, मैं अब इस समाधान का उपयोग नहीं करता हूं। वह उस समय निश्चित स्थिति निर्धारित करने के मेरे सीमित ज्ञान पर आधारित था। स्थिति का उपयोग कर समाधान: तय बेहतर हैं। –

उपयोग:

#element { 
    position: fixed; 
    right: 200px; 
    top: 200px; 
}

"निर्धारित" का अर्थ तत्व ब्राउज़र विंडो को किस स्थिति में है।

स्रोत

2011-08-08 10:36:56 Fasani

position:fixed

स्रोत

2011-08-08 10:38:27

ब्राउज़र का समर्थन करता है, तो "स्थिति: तय":

<html> 
<head> 
<style> 
html,body { 
    margin: 0; 
} 
#navbar.navbar_fixed { 
    position:fixed; 
    top:0px; 
    width:100%; 
    height:100px; 
    background-color:#f00; 
} 
#navbar.navbar_absolute { 
    position:absolute; 
    top:100px; 
    width:100%; 
    height:100px; 
    background-color:#f00; 
} 
</style> 
<script type="text/javascript"> 

function window_onload() { 
    window.addEventListener("scroll",navbar_reset_top,false); 
} 

var navbar_top=100; 

function navbar_reset_top() { 
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 
    if(scrollTop>navbar_top&&navbar.className==="navbar_absolute") { 
    document.getElementById("navbar").className="navbar_fixed"; 
    } 
    else if(scrollTop<navbar_top&&navbar.className==="navbar_fixed") { 
    document.getElementById("navbar").className="navbar_absolute"; 
    } 
} 

</script> 
</head> 
<body onload="javascript:window_onload();"> 
<div id="navbar" class="navbar_absolute">Navigation Bar</div> 
<div style="height:2000px;background-color:#ff0;">Content</div> 
</body> 
</html>

स्रोत

2011-08-08 11:37:33

यह एक बेहतर समाधान है क्योंकि यह दूसरे सुझाव पर झिलमिलाहट को समाप्त करता है, जो लगातार प्रत्येक स्क्रॉल पर पुनर्स्थापना करता है। –

मैं k अगले सादे जावास्क्रिप्ट उदाहरण अधिक तेज है अब यह पोस्ट थोड़ा पुराना है, लेकिन अभी भी बहुत उपयोगी है .. मैं बस एक jquery संस्करण (थोड़ा सा क्लीनर और कॉन्फ़िगर करने योग्य) जोड़ना चाहता था, लेकिन यह एंड्रयू डी उत्तर का एक संशोधित संस्करण है।

इस मामले में मैं दो वर्गों की जरूरत नहीं है, बजाय मैं एक किस स्थिति में div है और जब मैं एक निश्चित बिंदु (max_scroll) तक पहुँचने मैं वस्तु के लिए एक वर्ग जोड़ सकते हैं और उस वर्ग क्या उसमें बदलाव

बनाता है

नीचे जावास्क्रिप्ट (सभी डी दस्तावेज़ तैयार समारोह के अंदर किया)

<script type="text/javascript"> 
var max_scroll = 400; // this is the scroll position to start positioning the nav in a fixed way 
$(document).ready(function(){ 

     $(window).scroll(function() { 
     var navbar = $(".filterbutton"); 

     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
     if(scrollTop > max_scroll && !navbar.is(".filterbuttonFixed")) { 
       navbar.addClass("filterbuttonFixed"); 
       // console.log("go floated"); 
     } 
     else if(scrollTop < max_scroll && navbar.is(".filterbuttonFixed")) { 
       // console.log("return to normal"); 
       navbar.removeClass("filterbuttonFixed"); 
     } 

} 
}); 

</script>

है और यह मेरा नव-बार कंटेनर div

<div id="floatable-nav-bar" class="my-relative-position-class"> 
    <nav class="page-menu"> 
     <ul class="scroll-nav"> 
      <li><a class="selected" href="#first">Section 1</a></li> 
      <li><a class="" href="#second">Section 2</a></li> 
      <li><a class="" href="#third">Section 3</a></li> 
      <li><a class="" href="#fourth">Section 4</a></li> 
     </ul> 
    </nav> 
</div>

और पिछले लेकिन है कम से कम नहीं, मेरे नव-शुरु शैली

#floatable-nav-bar.nav_floated { 
    position:fixed; 
    top:1px; 
    left: 0; 
    width:100%; 
    text-align: center; 
    background: #EEE; 
    padding: 5px 0; 
}

मैं जानता हूँ कि यह सबसे सरल उदाहरण नहीं है, लेकिन jQuery उपयोगकर्ताओं के लिए हो सकता है कि यह एक सरल तरीका है, और मुझे लगता है कि यह बेहतर है बस जोड़ सकते हैं और एक वर्ग को दूर करने के (कम से कम इसके लिए था मुझे)।

स्रोत

2012-07-16 23:04:11 polloss

थोड़ा सुझाव: 'max_scroll = 450' के बजाय, आप' max_scroll = $ ("# floatable-nav-bar") का उपयोग कर सकते हैं। स्थिति()। शीर्ष'। इस तरह, शीर्ष पर पहुंचने पर नेविबार स्वचालित रूप से तैर जाएगा (और ब्राउज़र के बीच किसी भी मामूली विविधता के लिए शीर्ष ऑफ़सेट खातों को खोजने के लिए jQuery का उपयोग)। –

मैं उसी समय शरीर में एक वर्ग भी जोड़ना चाहता हूं ताकि आप जिस तत्व को ठीक कर रहे हैं उसकी ऊंचाई को जोड़ सकें ताकि पृष्ठ कूद न सके और स्क्रॉल अच्छा और चिकनी है '$ ('body ') .addClass ("FixedElementOffset"); ' – Nickfmc

आप यह कुछ इस तरह कर सकते हैं:

Example

सीएसएस

body { 
    height: 3000px; 
    top: 0; 

} 
#image { 
    width: 100%; 
    background: #444; 
    height: 50px; 
} 
#scroller{ 
    height:100px; 
    background:#ccc; 
} 
.stuck{ 
    position:fixed; 
    z-index:100; 
    width:100%; 
    top:0; 
}

स्क्रिप्ट

$(window).scroll(function() { 
       if ($(window).scrollTop() > 50) { 
        $('#scroller').addClass('stuck'); 
       } else { 
        $('#scroller').removeClass('stuck'); 
       } 

      });

के बाद पुस्तक 50 पिक्स यह स्क्रोलर की सीएसएस बदल जाएगा।

इस एक अच्छी शुरुआत

स्रोत

2015-02-24 08:32:27 Nileshd

बल्कि तो स्क्रॉल लंबाई को परिभाषित किया जा सकता है, हम वस्तु की स्थिति क्यों परिभाषित नहीं कर सकते? एक बार यह शीर्ष पर पहुंचने के बाद कहें: 0 फिर स्क्रिप्ट को ट्रिगर करें। इस तरह यह अधिक डिवाइस अनुकूल होगा।

स्रोत

2015-09-05 13:08:34

मुझे नहीं लगता कि यह वास्तव में प्रश्न का उत्तर देता है। उसने "स्क्रॉल लम्बाई को परिभाषित करने" के बारे में नहीं पूछा (जो भी इसका मतलब है?) उसने पूछा कि उसके पास एक निश्चित हेडर कैसे हो सकता है। – dman2306

स्क्रॉल करते समय ब्राउज़र विंडो के शीर्ष पर ऑब्जेक्ट को ठीक करें

उत्तर

संबंधित मुद्दे