2016-09-23 5 views
2

Sobald ich scroll down etwa 300px, ich möchte, dass mein Nav an der Spitze fixiert werden. Ich möchte auch den Stil auf diesem Nav leicht ändern.Fixed Nav, wenn Sie nach unten scrollen

Genau wie auf dieser Website: http://demo.themeruby.com/maple/?home_layout=classic&light_style=1#038;light_style=1/page/2/

Dies ist die JSFiddle für die, die ich kopiert: http://jsfiddle.net/ianclark001/wELFH/

.nav { 
width: 100%; 
position: relative; 
text-align: center; 
background-color: white; 
padding: 16px; 
display: inline-block; 
} 

.nav.clone { 
width: 100%; 
position: fixed; 
text-align: center; 
background-color: yellow; 
padding: 16px; 
display: inline-block; 
-webkit-transition: 0.2s top cubic-bezier(.3,.73,.3,.74); 
transition: 0.2s top cubic-bezier(.3,.73,.3,.74); 
} 

body.down nav.clone { 
top: 0; 
} 

Ich verstehe nicht, warum ich Körper erwähnen müssen .. Ich weiß es Es gibt eine Menge auf dieser Website, aber ich kann nichts finden, das mein Problem behebt. jQuery:

$(document).ready(function() { 
var $nav = $("nav"), 
    $clone = $nav.before($nav.clone().addClass("clone")); 

$(window).on("scroll", function() { 
var fromTop = $("body").scrollTop(); 
$('body').toggleClass("down", (fromTop > 300)); 
    }); 
}); 

Antwort

-2

EDITED: Dies ist meine eigene Arbeit sticky navbar:

/* CSS Document */ 
 

 
.affix{position: fixed !important; top:0px; z-index:999; width:100%;} 
 
@media (max-width: 991px) { 
 
    .navbar-header { 
 
     float: none; 
 
    } 
 
    .navbar-left,.navbar-right { 
 
     float: none !important; 
 
    } 
 
    .navbar-toggle { 
 
     display: block; 
 
    } 
 
    .navbar-collapse { 
 
     border-top: 1px solid transparent; 
 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
 
    } 
 
    .navbar-fixed-top { 
 
     top: 0; 
 
     border-width: 0 0 1px; 
 
    } 
 
    .navbar-collapse.collapse { 
 
     display: none!important; 
 
    } 
 
    .navbar-nav { 
 
     float: none!important; 
 
     margin-top: 7.5px; 
 
    } 
 
    .navbar-nav>li { 
 
     float: none; 
 
    } 
 
    .navbar-nav>li>a { 
 
     padding-top: 10px; 
 
     padding-bottom: 10px; 
 
    } 
 
    .collapse.in{ 
 
     display:block !important; 
 
    } 
 
    .navbar-nav .open .dropdown-menu{position:static; float:none; width:auto; margin-top:0; background-color:transparent; border:0; -webkit-box-shadow:none; box-shadow:none;} 
 
} 
 
@media (max-width: 991px){.dropdown-menu > li > a{color:#FFF; padding-left:15px;}} 
 
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {color:#EEE;}
<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Documento sin título</title> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
 

 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</head> 
 
<body> 
 
<nav class="navbar navbar-default menuu" data-spy="affix" data-offset-top="100"> 
 
    <div class="container"> 
 
    <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> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active m"><a class="menun" href="#">Noticies</a></li> 
 
     <li class="m"><a class="menun" href="#">Agenda</a></li> 
 
     <li class="m"><a class="menui" href="#">e-Butllet&iacute;</a></li> 
 
     
 
     <li class="m"><a class="menun" href="#">Entitats</a></li> 
 
     <li class="m dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Galeria 
 
      <b class="caret"></b></a> 
 
    \t \t <ul class="dropdown-menu"> 
 
     \t \t <li><a href="#">Fotos</a></li> 
 
     \t \t <li><a href="#">V&iacute;deos</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="m"><a class="menun" href="#">Col&middot;laboren</a></li> 
 
     <li class="m"><a class="menun" href="#">Convocat&ograve;ries</a></li> 
 
     <li class="m"><a class="menun" href="#">Sac solidari</a></li>  
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 
<p> 
 
\t <span> \t Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, illum, assumenda impedit harum corrupti vel dignissimos perspiciatis cupiditate tenetur in ipsa modi repellendus ipsum quam est? Excepturi quibusdam qui nesciunt?</span> 
 
\t <span>Harum, doloremque, suscipit, asperiores, aut dicta cupiditate sit libero facere nobis optio veritatis quidem cumque delectus. Voluptatem, amet, quidem, quo, molestias voluptate iusto ducimus dolor odit ipsa harum magnam impedit!</span> 
 
\t <span>Voluptatem, repudiandae, itaque commodi laboriosam tempore unde veritatis dolorem error ut in illum recusandae veniam eligendi. Ducimus, consectetur, beatae, error nobis asperiores totam dolores ullam temporibus fugiat iusto tempore praesentium.</span> 
 
\t <span>Dignissimos, rem, veniam, nobis, magni beatae sunt perspiciatis omnis molestias praesentium vero rerum doloribus id esse voluptatum dolorum fugiat velit debitis culpa enim libero voluptatibus repellat aliquam natus deleniti aspernatur.</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, delectus, iusto aut facilis magni ducimus reiciendis repudiandae aliquid quae eveniet commodi aspernatur tenetur assumenda nostrum totam eligendi dolorem? Rem, deserunt!</span> 
 
\t <span>Non, eligendi, fuga illum molestias itaque laboriosam aperiam architecto adipisci totam at nobis velit a atque corporis quae sapiente officiis veritatis corrupti accusamus optio! Recusandae, neque voluptate error pariatur sequi.</span> 
 
\t <span>Omnis magni nostrum accusantium! Accusantium, eum, eligendi, corporis iusto hic exercitationem laborum unde obcaecati magni alias enim maxime illo culpa beatae reiciendis consectetur ipsam veniam et eveniet atque. Similique, harum.</span> 
 
\t <span>Dicta, laudantium, quasi, ipsam asperiores possimus cumque deserunt amet eveniet dolorum sequi ipsum libero sed officia earum soluta ullam ab? Dolor, deleniti beatae natus cumque earum quidem dicta quis nihil.</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, eum magnam debitis assumenda voluptate ipsum quibusdam architecto minima ducimus doloribus molestiae amet iusto veritatis est sed ut sequi nulla quo?</span> 
 
\t <span>Consequatur, quidem, minus veritatis laboriosam hic nostrum similique rem quam reprehenderit temporibus non aliquam magni repellat blanditiis ipsam provident repudiandae atque quia quae dicta laudantium obcaecati dolores molestias explicabo earum.</span> 
 
\t <span>Maiores quas nobis accusamus sit tenetur soluta asperiores ea! Quod, molestiae commodi non ut hic consequuntur cum reiciendis tempora blanditiis laborum praesentium eius quis perspiciatis quisquam nihil quas delectus eaque?</span> 
 
\t <span>Quas, porro, ut, magnam a officia amet beatae corporis odit laudantium quis rem reiciendis eius sequi molestias rerum sint itaque debitis at cumque sed dolorem iusto incidunt impedit maiores earum.</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloremque culpa architecto explicabo at delectus sit accusantium ratione dolorem quas fugiat a aut veritatis itaque iure praesentium distinctio quidem cupiditate.</span> 
 
\t <span>Asperiores, debitis, ullam, nisi natus inventore corporis tempora odio sit laborum libero mollitia enim fugit quasi numquam temporibus optio sint totam excepturi voluptates accusantium. Alias animi ullam atque maxime facere?</span> 
 
\t <span>Et, hic, fugit, enim vitae nisi culpa id explicabo dolorem incidunt accusamus cumque doloremque unde fugiat error eius rerum ducimus beatae architecto quidem dolores iste officia doloribus odio expedita eaque.</span> 
 
\t <span>Excepturi, commodi, debitis, doloremque sapiente repellat qui nulla facilis earum deserunt sit modi mollitia amet dicta fuga corporis alias eligendi magni voluptas a et at recusandae culpa ut rerum incidunt!</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, voluptatibus, hic, officiis quis explicabo dolorum sunt ea aliquid magnam porro nesciunt cum a vero deserunt beatae adipisci possimus expedita sint.</span> 
 
\t <span>Ex, maxime, neque repellat quae itaque tempore aliquam sed mollitia praesentium obcaecati ea quidem ab assumenda dolorum autem veritatis officia totam quia minus omnis doloribus quibusdam voluptate accusamus quis explicabo!</span> 
 
\t <span>Iure, velit, porro, modi quod neque commodi recusandae blanditiis omnis similique totam non id officia esse ad placeat tempore corporis. Deleniti, aliquid, repellendus dicta porro est voluptate in asperiores a.</span> 
 
\t <span>Autem, officia, quis, mollitia fugiat modi neque tempore sunt veniam inventore porro vel unde rem id in quisquam quibusdam at blanditiis sed soluta quos vero temporibus magni quae. Aperiam, animi.</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, perferendis, laboriosam, quasi, blanditiis voluptas omnis iusto mollitia eaque et nobis odio quibusdam ab amet at officiis doloribus dignissimos laudantium rerum.</span> 
 
\t <span>Neque, aperiam, quod quaerat esse cupiditate a recusandae ad deserunt perspiciatis error. Sapiente magni exercitationem dolore quis quae ipsam tempora molestias rem quidem reprehenderit! Illo, nemo deleniti deserunt obcaecati commodi.</span> 
 
\t <span>Commodi, beatae, consectetur animi corporis aspernatur enim laborum fugiat magni illo laboriosam. Soluta, ad, nihil, quod, quisquam commodi minus voluptatem temporibus iusto nam alias tempore perspiciatis asperiores culpa nostrum officiis.</span> 
 
\t <span>Ut, placeat eos quidem quod fugit pariatur necessitatibus. Incidunt, rem, porro, deserunt, repudiandae sapiente veniam rerum architecto doloribus velit tenetur nemo in fugit aliquam. Dolorem assumenda est tempore iusto adipisci.</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, a, iure, quibusdam iusto inventore nostrum nam perspiciatis incidunt placeat nesciunt aperiam quis laudantium debitis quas itaque unde natus veniam deserunt!</span> 
 
\t <span>Consequatur maxime a magni rerum enim suscipit saepe ducimus impedit. Natus, at sapiente ex doloribus numquam! Doloremque, reprehenderit, ut, natus, quae labore necessitatibus eligendi repudiandae eos accusamus soluta nulla porro.</span> 
 
\t <span>Voluptatem, quam porro architecto alias cupiditate doloremque explicabo aut vel et obcaecati quasi totam molestiae atque earum natus quidem repellendus reprehenderit voluptatum quas animi. Pariatur quod aut tempore quae magnam.</span> 
 
\t <span>Voluptates, adipisci, cupiditate aliquid neque nostrum sint quisquam sunt debitis est iure dolores cumque ipsa necessitatibus optio alias fugit rerum ex dolorum ad assumenda officia veritatis magnam perferendis laboriosam impedit.</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, reprehenderit, praesentium, aliquam dolorem deserunt quia placeat nisi odit iste ut adipisci animi delectus tenetur vero quae quidem aspernatur et cum.</span> 
 
\t <span>Beatae, commodi officiis animi laborum quo cumque fugit cupiditate tempore eum nemo fugiat ducimus rem molestias obcaecati earum explicabo aut! Aspernatur hic cupiditate harum aperiam necessitatibus voluptatem obcaecati nostrum quasi.</span> 
 
\t <span>Officia, quidem, labore, reprehenderit, expedita ullam beatae soluta modi quisquam perspiciatis eius animi facilis minus dolorem neque ad ipsam alias quia blanditiis iste quaerat eos ex voluptate! Quibusdam, voluptas, esse!</span> 
 
\t <span>Inventore, distinctio, quas, tenetur porro ex odio excepturi voluptatibus suscipit a doloremque asperiores cum aliquid numquam consectetur rerum aperiam labore dignissimos autem expedita tempore perferendis corrupti praesentium iure impedit quaerat.</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, sequi, facere repellat voluptatibus molestiae nobis recusandae fugiat porro dolorum odit laudantium corrupti dicta fugit delectus eius pariatur repudiandae quisquam vel.</span> 
 
\t <span>Velit, iusto ipsum perferendis alias aperiam ipsam totam vitae minima in? Consectetur, optio, provident tempora id magni vitae illo quaerat pariatur rerum minus ex repudiandae numquam architecto laborum accusamus repellendus?</span> 
 
\t <span>In, temporibus, accusantium odio eligendi delectus nihil numquam hic sed tempore repellendus blanditiis doloribus veniam dolores magni est culpa mollitia quos inventore quaerat tempora at iusto saepe ab. Illum, neque.</span> 
 
\t <span>Ipsam, nulla, est asperiores officia illum dolorem error obcaecati repudiandae quaerat aliquam culpa voluptatem eligendi aperiam fugiat voluptatum tenetur animi explicabo inventore voluptas aspernatur ullam numquam nisi dicta ipsum ducimus!</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, repudiandae, blanditiis aliquam voluptates in aliquid placeat doloribus vitae laboriosam nihil maiores voluptate quis dolorem saepe laborum inventore sunt illo assumenda!</span> 
 
\t <span>Temporibus, aspernatur, nihil, repellendus totam dolores consequuntur maxime neque earum nesciunt magni vero magnam repudiandae facilis sed distinctio cupiditate placeat veritatis expedita et atque explicabo iusto recusandae quidem soluta sint.</span> 
 
\t <span>Quaerat, tempore quam doloremque laborum voluptate perferendis recusandae possimus sit totam at perspiciatis nesciunt tenetur repellat hic culpa quo velit suscipit optio neque voluptatibus voluptatum est ullam atque cumque libero?</span> 
 
\t <span>Ut, quisquam, laboriosam, magnam laudantium voluptas dignissimos dolorum nulla consequuntur vel minima enim inventore tempore ipsam beatae odio facilis ab. Et, animi, atque ratione doloribus ullam dignissimos odit natus quos.</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, neque, ipsum illum distinctio amet at facilis doloremque facere cupiditate possimus cum delectus voluptatibus consequatur rem illo soluta fuga animi nihil.</span> 
 
\t <span>Incidunt, quam, odit quis ratione cumque et commodi accusamus fugit in corporis possimus quo sed officiis? Molestiae, itaque, nam, magnam, aut nulla dicta ex quidem vero reprehenderit voluptatum voluptatibus dolorem!</span> 
 
\t <span>Aliquid, vero, error, veritatis dolores cumque veniam atque necessitatibus repellat culpa cupiditate reprehenderit qui aperiam facilis accusamus id fugiat quasi. Earum, ad eius est iste ab dolore fugiat molestias repudiandae!</span> 
 
\t <span>Dolorum, voluptatum, laborum quis ullam dignissimos iste asperiores molestiae odio doloremque deserunt molestias necessitatibus officia cumque voluptatem error inventore repudiandae quisquam blanditiis totam debitis tempore vero ratione rem nesciunt similique!</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, tempora consequatur dicta quas dolore architecto autem ullam veritatis error quis ut vitae tempore nemo iste eligendi impedit sit deleniti beatae.</span> 
 
\t <span>Blanditiis, ut, ad, doloremque accusamus illum aliquam ducimus eligendi possimus repudiandae expedita facilis fugit reprehenderit velit quos accusantium voluptatum excepturi iste mollitia aut magni. Nobis, explicabo at cupiditate nihil culpa?</span> 
 
\t <span>Sit, enim velit iure quidem sapiente magnam quia. Sit, voluptas, ad magni illo non atque animi sunt facere repellendus iste beatae at impedit totam nam quidem minima itaque deleniti dolores.</span> 
 
\t <span>Optio debitis officia accusantium voluptate accusamus commodi maxime esse vel quas asperiores. Nemo, unde, harum, aliquam, repudiandae voluptatibus ea iste ipsa a dicta modi vero incidunt cumque. Quasi, omnis, tenetur?</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, nulla, deleniti, ducimus animi autem facere assumenda ex ab sed aspernatur facilis maiores expedita. A, non architecto nemo vitae alias dolorum.</span> 
 
\t <span>Perspiciatis, minus, doloremque veritatis expedita earum eos excepturi pariatur sequi nemo iusto aspernatur quo numquam! Inventore omnis fuga repudiandae magni neque quas dolorum repellat? Tempore quaerat accusamus consequuntur sequi repudiandae.</span> 
 
\t <span>Necessitatibus, assumenda, soluta voluptas quidem similique consequuntur harum adipisci quas quisquam architecto distinctio beatae recusandae obcaecati ducimus fuga numquam aperiam nemo animi. Nam, porro deleniti at rerum vel aliquid dolorum!</span> 
 
\t <span>Non cumque veniam sequi laboriosam esse qui ab quam officiis. Reiciendis, sint, minus tempora asperiores cum quisquam sapiente porro itaque perspiciatis? Quia amet porro tempora perferendis eius necessitatibus totam sequi.</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, similique provident voluptates itaque sequi quaerat dignissimos fuga repudiandae voluptas corporis dolorem consectetur natus alias facilis nemo sunt sit eum veniam.</span> 
 
\t <span>Alias, accusantium, quod harum debitis quae dicta vitae consequuntur distinctio cumque ipsa. Ut, mollitia, consectetur impedit porro enim laudantium. Similique, nisi totam alias possimus distinctio eos cum laboriosam delectus quisquam!</span> 
 
\t <span>Accusantium, voluptas, ipsa, sequi, tempore modi reiciendis distinctio hic iste odit ex et exercitationem placeat repellendus! Cum, quas, consequatur ipsam minima facere sint ad dolore ex necessitatibus adipisci vitae laborum.</span> 
 
\t <span>Doloribus, similique nemo cumque excepturi commodi adipisci voluptates ullam laboriosam perspiciatis nihil a quo ad nam amet sint. Exercitationem, harum, dicta soluta eius autem quas praesentium voluptatem iste delectus illum!</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni id vero eum similique tenetur in expedita nesciunt aliquid. Alias, corporis non fuga cumque voluptatibus sint quae architecto aliquam molestiae reprehenderit.</span> 
 
\t <span>Hic, magni odit quam rem illum totam qui optio debitis. Inventore, impedit blanditiis accusantium aliquid tenetur animi rem totam natus minus dolor debitis eius consequuntur praesentium cumque repellat. Mollitia, sapiente?</span> 
 
\t <span>Dolorem, dignissimos, perferendis, rem provident voluptate quam quasi cumque odit suscipit perspiciatis dolores nesciunt accusamus. Fuga nam iure quo labore mollitia ratione consequuntur tenetur sapiente quasi ullam? Quidem, modi, vel?</span> 
 
\t <span>Consequuntur, ut, qui, consectetur in voluptatum numquam cumque voluptate impedit modi vero quod sit veritatis odit maxime assumenda necessitatibus quo maiores optio recusandae obcaecati aspernatur pariatur illo itaque minima sed.</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, pariatur, sapiente, facere, dolore placeat dignissimos corporis cupiditate voluptates dolores veniam facilis cum nemo eos nobis iste fugit aspernatur doloremque molestiae!</span> 
 
\t <span>Ut, numquam ullam nihil dolores voluptatum libero dolore laboriosam laborum voluptates. Suscipit, laudantium, minus, ipsa sed maxime obcaecati quos atque enim ducimus et aliquid amet modi iure ex ab voluptate?</span> 
 
\t <span>Sint, eaque ex vitae quidem rem itaque quis saepe voluptatem placeat libero cupiditate accusantium assumenda error recusandae voluptatibus illum eligendi similique cumque veritatis ratione quos repellendus possimus maiores minus nam.</span> 
 
\t <span>Porro, ex repellat quo incidunt iste distinctio quibusdam vero libero veritatis magni iusto consequuntur est necessitatibus perspiciatis natus error cumque odio similique modi optio voluptatum labore molestiae accusamus officiis ratione.</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, ad, amet, id, eaque doloremque accusantium officia error ipsum expedita eius quibusdam debitis facilis dolores doloribus dolor repellendus distinctio sint voluptatibus.</span> 
 
\t <span>Nam, repellendus, quidem possimus consequatur reiciendis sapiente velit magni. Hic, amet nostrum rerum sit ullam voluptatibus maiores? Eos, atque repudiandae earum iusto inventore dicta repellendus ad in odio perferendis. Dolorum.</span> 
 
\t <span>Consequuntur, tenetur, sapiente, eligendi dignissimos earum aliquam iste accusamus fugiat tempora vitae molestiae ad quod optio. Iure, eos quam voluptatum quae soluta dolorem repudiandae quos adipisci dicta officiis. Doloribus, temporibus!</span> 
 
\t <span>Harum, ad, quidem, ullam sequi excepturi aliquid est earum repellat amet commodi quo corporis rerum tempore neque odit illo nihil ratione ea voluptate veritatis vero libero minus impedit iste quisquam!</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, vel, velit minus iure qui quaerat cum eveniet tempore quam corporis consequatur quae totam delectus nemo inventore distinctio aspernatur esse dolor?</span> 
 
\t <span>Quisquam, eveniet ipsum vero excepturi quia ipsa exercitationem molestiae soluta! Vitae, architecto at dolore nam iure provident rerum ea delectus adipisci qui recusandae sint voluptates natus doloribus porro error esse.</span> 
 
\t <span>Placeat, ipsa, ipsum, ut iusto porro dolor animi commodi soluta quia nesciunt vero blanditiis consequatur illum. Cumque, pariatur, esse, laboriosam fuga architecto et neque voluptatibus atque magnam sapiente quis aliquid.</span> 
 
\t <span>Sequi, eligendi, neque, error, dicta repudiandae esse debitis ipsum distinctio numquam iure quisquam voluptate delectus ipsam suscipit aut reprehenderit voluptates asperiores aspernatur. Autem praesentium doloremque perferendis quis atque laudantium sapiente.</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, fugiat, ea, provident aspernatur repellendus dolores modi assumenda tempore nesciunt perspiciatis dolor voluptatem libero eveniet ducimus expedita tempora minus architecto et!</span> 
 
\t <span>Natus, dolor, sunt, quos fugiat numquam omnis consequatur dolores assumenda molestiae ducimus sequi iusto laboriosam accusantium ipsam quo! Quod, architecto, veritatis qui esse est omnis numquam explicabo perspiciatis ratione quae.</span> 
 
\t <span>Sequi, totam dolorem dolor velit voluptate earum laboriosam magni debitis. Blanditiis, qui, enim, dolor eum quo ipsa beatae voluptates excepturi impedit illum repellendus quaerat adipisci architecto laboriosam ea maxime aperiam.</span> 
 
\t <span>Possimus, ipsum, ipsa quia asperiores ullam dolorem deserunt eius minus obcaecati voluptas illum neque expedita reprehenderit eveniet impedit assumenda est minima soluta velit sapiente enim ut pariatur totam veniam voluptatum!</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, ipsum ab repellat consequatur omnis quia soluta laudantium eaque culpa eius. Aperiam modi molestiae quae repellat sequi. Libero, distinctio qui doloribus?</span> 
 
\t <span>Perferendis, voluptate, quis veniam odio necessitatibus dignissimos nobis saepe magni molestiae magnam eveniet dolores! Odit, repellat, nemo unde odio sit vero itaque quas iste rerum sunt porro repellendus pariatur. Tempora.</span> 
 
\t <span>Reiciendis, vel, nisi saepe nam et distinctio earum maxime cupiditate ipsa necessitatibus voluptas non veritatis sapiente quo error blanditiis similique aspernatur quam sunt impedit odit est ea minima adipisci eligendi.</span> 
 
\t <span>Facere, atque voluptatem blanditiis quibusdam asperiores pariatur mollitia autem a adipisci quo numquam quae sed voluptatum dolore tempore esse alias error. Harum, illum eveniet ullam perspiciatis velit provident autem necessitatibus.</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, nisi labore soluta earum fugit commodi tempore ut repellendus voluptates quisquam iure enim dolorem placeat quis doloremque porro maxime vero eum?</span> 
 
\t <span>Nesciunt aliquam recusandae minus porro maiores aliquid vero doloremque velit magni aperiam! Atque, voluptates est sit esse impedit accusantium id. Odit, dignissimos iste eum provident modi ullam soluta vel omnis!</span> 
 
\t <span>Quia, ipsum laborum consectetur saepe accusantium animi qui blanditiis dignissimos accusamus aliquam voluptatum quis recusandae officia beatae tempore velit dicta quaerat nihil itaque omnis quod ad magni et ducimus deserunt.</span> 
 
\t <span>Animi, sequi, natus doloremque corporis debitis aspernatur harum aut recusandae nemo perferendis commodi repellendus unde aliquam dolores molestiae accusamus laboriosam reprehenderit ex eum amet modi nisi veritatis dolorum quia quam.</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, odio explicabo obcaecati inventore consequatur nemo ratione aperiam earum unde natus dolor maiores reiciendis fugit praesentium labore at qui impedit ut.</span> 
 
\t <span>Commodi, atque, deleniti, eaque nemo molestiae deserunt ipsa tempora neque temporibus architecto nam at ab aliquam recusandae enim officiis soluta quisquam eos distinctio amet facere omnis exercitationem natus voluptas cumque!</span> 
 
\t <span>Dolorem, a aspernatur non aperiam sapiente corrupti nostrum nulla esse unde laborum. Velit eius eaque fuga praesentium consectetur error expedita laboriosam impedit? Officia hic quo amet cupiditate temporibus facere adipisci.</span> 
 
\t <span>Non, enim architecto dignissimos commodi tempore laborum maxime aut alias! Rerum, quasi, neque omnis vel temporibus ullam minus quas consectetur ut perspiciatis quod pariatur ea sed dicta in recusandae voluptas.</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, consequatur, natus eligendi autem cupiditate similique corporis. Maxime, libero, accusantium odio repudiandae porro modi alias illo molestias quas ipsam ut tenetur.</span> 
 
\t <span>Doloremque ab hic cupiditate deserunt. Nam dolorum ut itaque suscipit aut. Perferendis voluptatum iure dolore nulla neque eum aliquam esse blanditiis? Autem, ratione tempore omnis fugit repellendus rem. Laborum, quisquam.</span> 
 
\t <span>Inventore, explicabo, culpa, porro, laudantium nam quisquam quas consequuntur incidunt unde voluptates quis natus suscipit rerum tempora eius nemo ipsum saepe sed quidem hic ipsa ea perspiciatis nesciunt! Sapiente, fugit.</span> 
 
\t <span>Quisquam, commodi doloribus aliquam quo natus fugit a nihil fuga quaerat laborum aut perspiciatis magnam sapiente corrupti amet nesciunt rerum sed atque debitis aperiam pariatur ab necessitatibus iste eveniet harum!</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, dicta consectetur perferendis nostrum praesentium quae tempore tenetur suscipit voluptatem sed! Voluptates, consequatur, ullam velit sapiente in odit rerum excepturi facere.</span> 
 
\t <span>Odio, illo, facere, voluptates, consequuntur a provident quis voluptatibus laboriosam quibusdam quo doloribus adipisci veritatis earum vitae hic dolorem aliquam ab illum atque fugiat reprehenderit deserunt id harum ullam delectus.</span> 
 
\t <span>Nulla, saepe, fugiat magni sunt beatae dolor aliquam fuga recusandae assumenda alias aspernatur nisi id amet ut quo voluptate deserunt! Quis, impedit distinctio reiciendis nesciunt non pariatur unde recusandae minus.</span> 
 
\t <span>Molestias, eius, eum esse non suscipit et fugiat consequatur sit aperiam sed tempore ipsa vel doloremque ipsam reiciendis. Optio, voluptates nisi in dolorem tempora autem eaque blanditiis iste fugit cupiditate.</span> 
 
</p> 
 
<p> 
 
\t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, distinctio, porro, aliquam commodi maiores voluptatibus labore omnis consequuntur eum assumenda corrupti ea facere facilis nulla harum consectetur inventore soluta esse.</span> 
 
\t <span>Obcaecati, beatae, tempora, nisi, unde optio accusantium praesentium nesciunt ex eligendi illum quia pariatur explicabo magni saepe voluptas ab id laudantium consectetur repellendus fugit neque minus totam maiores vel reprehenderit!</span> 
 
\t <span>Quisquam, reiciendis, eius, facere accusantium quod quo commodi ex tempore iusto pariatur facilis inventore? Vitae, rerum, quis, debitis, minima laboriosam commodi ullam ab consequatur modi eius aperiam autem libero mollitia.</span> 
 
\t <span>Facilis, consectetur minus minima aliquid provident esse eos cupiditate dolores explicabo perspiciatis sapiente quis odio tempore neque deserunt sit fugit placeat reprehenderit animi recusandae officia unde velit totam ab corporis!</span> 
 
</p> 
 
</body> 
 
</html>

Keine Notwendigkeit, komplementäre Skripten. es funktioniert gut. So bearbeiten Sie die Änderung:

<nav class="navbar navbar-default menuu" data-spy="affix" data-offset-top="100"> 

Daten-Offset-top = „100“ bedeutet, wenn Sie blättern 100 px von oben, wird nav klebrig sein, und wenn man nach oben auf weniger als 100 Pixel von oben wird wieder normal.

Es gibt einige Stylings Sprünge zu verhindern, wenn das Hinzufügen von margin-top zum Inhalt festgelegt, wenn

+0

'position: fixed;' ist das, was es nach rechts scrollen lässt? – Roy123

+0

Sie müssen die Daten-offset-top = "400" bearbeiten, bedeutet es wird auf 400px nach unten fixiert werden, wird die Daten-Spion Affix "oben" fixieren und es klebrig machen. – JoelBonetR

+0

Warum einen anderen Code verwenden? nicht die vom OP zur Verfügung gestellte? Ich nehme an, du hast das irgendwo kopiert. wenn du das tust ... zumindest den Link belohnen wo du es von –

1

Check-Schnipsel unten korrigiert:

Erklärung: Zunächst berechnen wir den Abstand vom oberen Rand des Dokuments an die Gegenstand, den wir bearbeiten möchten (in diesem Fall header).

zum Beispiel Zwecke i ein div vor dem Header gemacht haben mit height von 300px

so oTop300px

dann sein wird, wenn die Scroll-Abstand von oben mehr als 300px ist bedeutet, dass wir auf die bekam Abschnitt, wo die header ist und so fügen wir Klasse hfixed zu header

danach, in CSS, Stil wir diese Klasse, wie wir wollen. In diesem Beispiel habe ich die background-color zu red geändert. aber Sie können hinzufügen, welchen Stil Sie wollen

hoffe, es hilft.

prost

var oTop = $("header").offset().top 
 

 
$(window).on("scroll", function() { 
 
     
 
    if($(window).scrollTop() > oTop) { 
 
    $("header").addClass("hfixed") 
 
    } else { 
 
     $("header").removeClass("hfixed") 
 
    } 
 
      
 
});
body { 
 
    margin:0; 
 
    padding:0; 
 
    font-family: Helvetica; 
 
} 
 
* { 
 
\t box-sizing: border-box; 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t -ms-box-sizing: border-box; 
 
\t -o-box-sizing: border-box; 
 
} 
 

 
header { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 60px; 
 
    line-height: 60px; 
 
    background: #eee; 
 
    color: #666; 
 
    padding-left: 20px; 
 
    border-bottom: 5px solid #ddd; 
 
} 
 
.imgbeforeheader { 
 
    height:300px; 
 
} 
 
.content { 
 
    padding: 0 20px 20px; 
 
    background: #fff; 
 
    line-height: 1.5; 
 
    color: #333; 
 
} 
 

 
header.hfixed { position:fixed;background-color:red;top:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="imgbeforeheader"> 
 

 
</div> 
 

 
<header>Header</header> 
 
<div class="content"> 
 
<p> 
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 

 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
 

 
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 

 
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
 

 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. 
 

 
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. 
 

 
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. 
 

 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 

 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
 

 
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 
    
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 

 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
 

 
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 

 
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
 

 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. 
 

 
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. 
 

 
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. 
 

 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 

 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
 

 
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 
</p> 
 
</div>

0

HTML

<div style="margin:100px"> 
<h3> 
    Some Content above navbar 
</h3> 
</div> 
<div class="fixme" style="background-color:gray; padding:20px"> 
    Header 
</div> 
<div> 
    <h3>Content below navbar</h3> 
    <div style="margin:300px">Some Text</div> 
</div> 

JQuery

$(document).ready(function() { 
    var fixmeTop = $('.fixme').offset().top; 
     //this is offset value from top 
    $(window).scroll(function() { 
     var currentScroll = $(window).scrollTop(); 
      // this is scroll position from top 
     if (currentScroll > fixmeTop) { 
      $('.fixme').css({position: 'fixed', top: '0', left: '0',width:'100%'}); 
      $('.fixme').css('background-color', 'green'); 
      //here you can change style of navbar once it reaches on top 

     } else { 
      $('.fixme').css({position: 'static'}); 
      $('.fixme').css('background-color', 'gray'); 
      //if navbar is not touching top then again here its style can 
      // be changed.  
     } 
    }); 
}); 

Hope this helfen.

0

Ich habe es so gemacht:

$(document).ready(function() { 
$(window).on("scroll", function() { 
var fromTop = $(window).scrollTop(); 

$('.nav').toggleClass("down", fromTop > 349); 
$('.content1').toggleClass("pad", fromTop > 349); 

}); 
}); 

.nav { 
width: 100%; 
position: relative; 
text-align: center; 
background-color: white; 
padding: 16px; 
display: inline-block; 
} 

.nav.down { 
position: fixed; 
background-color: rgba(255,255,255, 0.9); 
display: block; 
z-index: 999999; 

Mein nav springt ein wenig nach unten, so dass das, was dieses Pad ist für.

.content1.pad{ 
margin-top: 72px; 
} 
Verwandte Themen