div को स्क्रॉल करने के बाद मैं बूटस्ट्रैप नेविबार को शीर्ष पर कैसे ठीक कर सकता हूं?

मैं "ए" नामक एक निश्चित div के बाद बूटस्ट्रैप के साथ अपना navbar प्राप्त करने की कोशिश कर रहा हूं। Div "a" पृष्ठ के शीर्ष पर है, और इसकी ऊंचाई लगभग 400px है। एक बार जब उपयोगकर्ता div "a" और स्क्रॉलबार से पहले स्क्रॉल करता है, तो मैं स्क्रॉल बार को शीर्ष पर चिपकाना चाहता हूं। इस तरह के कुछ के समान: https://www.facebook.com/home लेकिन मेरे पास शीर्ष पर कोई वीडियो नहीं है, यह एक छवि है।div को स्क्रॉल करने के बाद मैं बूटस्ट्रैप नेविबार को शीर्ष पर कैसे ठीक कर सकता हूं?

हम कर सकते हैं कि हम खुद bootstrap?

धन्यवाद!

स्रोत

2013-04-05 abisson

मैं ऐसा करने के लिए एक jQuery प्लगइन लिखा था - http://drewdahlman.github.com/Pinned/

सुपर सरल - बस अपने हैडर स्थिति पूर्ण है और यह स्थिति बनाने -

$("#element").pinned({ 
    bounds: 100, // when to become sticky 100px 
    scrolling: 0, // position during scroll 0px 
});

कि यह करना चाहिए - तो jQuery प्लगइन की स्थापना की!

चीयर्स!

स्रोत

2013-04-05 16:25:16

facebook.com/home अपने नेवबार स्थिति उपयोगकर्ता से आगे स्क्रॉल 400px तक स्थिर करने के लिए स्थापित किया जाना चाहिए (या रिश्तेदार/पूर्ण) पर प्रभाव शो प्राप्त करने के लिए और फिर आप यह स्थिति है तय करने के लिए इतना है कि में रहता है निर्धारित करने की आवश्यकता स्क्रीन के शीर्ष पर। यह थोड़ा जावास्क्रिप्ट के साथ किया जा सकता है।

स्रोत

2013-04-05 16:22:34

आप उपयोग कर ट्विटर की बूटस्ट्रैप 'Affix' js की जाँच इस लक्ष्य को हासिल करना चाहते हैं तो। आप "डेटा-ऑफ़सेट-टॉप" का उपयोग करके "निश्चित" बिंदु को परिभाषित करते हैं और फिर जब उपयोगकर्ता स्क्रॉल करता है तो navbar शीर्ष पर तय हो जाएगा।

सीएसएस:

#con .well { 
    height:390px; 
} 

#nav.affix { 
    position: fixed; 
    top: 0; 
    width: 100% 
}

HTML:

<div class="container" data-spy="affix" data-offset-top="400" id="nav"> 
    <div id="nav" class="navbar"> 
     <div class="navbar-inner"> ...

जावास्क्रिप्ट:

$('#nav').affix();

यहाँ काम कर रहे बेला है: http://jsfiddle.net/skelly/df8tb/

यहाँ एक काम उदाहरण (बूटस्ट्रैप 3 के लिए अपडेट): http://bootply.com/90936

स्रोत

2013-04-05 17:16:58 ZimSystem

महान जवाब। उपरोक्त क्योंकि Affix.js आधिकारिक बूटस्ट्रैप कोर का हिस्सा है, जहां अन्य उत्तरों का अर्थ है बाहरी libs/code की आवश्यकता है। – Jon

सिर्फ इस का पालन करें। मेनू बार शीर्ष स्थिति तक पहुंचने पर आपको स्नैप चीज़ दिखाई नहीं देगी।

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style> 
    body { 
     position: relative; 
    } 
    .affix { 
     top:0; 
     width: 100%; 
     z-index: 9999 !important; 
    } 
    .navbar { 
     margin-bottom: 0px; 
    } 

    .affix ~ .container-fluid { 
    position: relative; 
    top: 50px; 
    } 
    #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;} 
    #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;} 
    #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;} 
    #section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;} 
    #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;} 
    </style> 
</head> 
<body data-spy="scroll" data-target=".navbar" data-offset="50"> 

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> 
    <h1>Scrollspy & Affix Example</h1> 
    <h3>Fixed navbar on scroll</h3> 
    <p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p> 
    <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels, and the links in the navbar are automatically updated based on scroll position.</p> 
</div> 

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span>       
     </button> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#section1">Section 1</a></li> 
      <li><a href="#section2">Section 2</a></li> 
      <li><a href="#section3">Section 3</a></li> 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#section41">Section 4-1</a></li> 
       <li><a href="#section42">Section 4-2</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</nav>  

<div id="section1" class="container-fluid"> 
    <h1>Section 1</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section2" class="container-fluid"> 
    <h1>Section 2</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section3" class="container-fluid"> 
    <h1>Section 3</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section41" class="container-fluid"> 
    <h1>Section 4 Submenu 1</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section42" class="container-fluid"> 
    <h1>Section 4 Submenu 2</h1> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 

</body> 
</html>

संदर्भ: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h

स्रोत

2017-11-23 17:13:51

div को स्क्रॉल करने के बाद मैं बूटस्ट्रैप नेविबार को शीर्ष पर कैसे ठीक कर सकता हूं?

उत्तर

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