修復了滾動時頁面頂部的對象

Question

我有這段代碼，試圖在滾動時將div保持在頁面頂部。 但這是行不通的。

能幫我解決我的錯嗎？

該對象位於<div class='container'>和div行中。

<div id="compareDiv"><a id="compare"
 href="#animatedModal" disabled class="compare-products">Compare Domestic </a>
                        </div>

<script>
    $(window).scroll(fixDiv);
function fixDiv() {
var $div = $("#compareDiv");
if ($(window).scrollTop() > $div.data("top")) { 
    $('#compareDiv').css({'position': 'fixed', 'top': '0', 'width': '100%'}); 
}
else {
    $('#compareDiv').css({'position': 'static', 'top': 'auto', 'width': '100%'});  }
}$("#compareDiv").data("top", $("#compareDiv").offset().top); // set original position on load

更新

它藏在我其他物體的后面。 我設置Z索引並解決了。

多謝你們

Answer 1

在處理這種情況時，需要牢記兩件事：

1. 您絕不能比較移動的 <div>作為參考並設置CSS。
2. 另外， 僅使用JS 添加或刪除類，並使用CSS設置位置。

我會做的事情是：

 $(function () { $(window).scroll(function () { if ($(window).scrollTop() > $("nav").position().top) $("nav").addClass("fixed"); else $("nav").removeClass("fixed"); }); }); 

 nav ul, nav ul li { display: block; margin: 0; padding: 0; list-style: none; text-align: center; } nav ul li { display: inline-block; } nav ul li a { text-decoration: none; padding: 5px; display: block; border: 1px solid #ccc; border-radius: 5px; color: #000; } nav.fixed { margin-bottom: 50px; } nav.fixed ul { position: fixed; top: 0; left: 0; right: 0; background-color: #fff; z-index: 9; border-bottom: 1px solid #ccc; padding: 10px; } 

 <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <h1>Hello, World!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem laboriosam incidunt consequatur earum tempora eius, nostrum fugit eveniet recusandae dolorum ab eaque quia fuga molestias ipsum tempore, porro, atque minima.</p> <nav> <ul> <li><a href="">Nav Item 1</a></li> <li><a href="">Nav Item 2</a></li> <li><a href="">Nav Item 3</a></li> <li><a href="">Nav Item 4</a></li> <li><a href="">Nav Item 5</a></li> </ul> </nav> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, unde, debitis. Est blanditiis obcaecati maxime quo id explicabo maiores placeat similique odit enim. Reiciendis, libero hic beatae cum perferendis odio.</p> <p>Nemo, reprehenderit exercitationem soluta, iste tempora aliquid voluptas eaque, repudiandae id optio mollitia suscipit amet. Quis repellendus quae et maiores harum deleniti blanditiis. Distinctio, voluptatem quo optio, aut pariatur perferendis!</p> <p>Obcaecati facere, quam doloribus maiores nisi unde nostrum! Fuga minus, consequuntur reiciendis nemo labore quaerat magni omnis ipsum. Quos vitae natus tempora adipisci quasi, delectus ad eius odit voluptates placeat?</p> <p>Ea iure quibusdam officia, dolor enim dolores at quo temporibus quod sit placeat ratione eligendi alias fugiat deleniti sed voluptates vero veritatis et porro dolorum, facere explicabo iste. Quo, commodi.</p> <p>Libero, nobis nihil, iusto unde autem ex iste nisi totam fuga reiciendis ab dolorum in voluptas minima neque fugiat odio. Saepe atque dolor, similique earum quidem, quas maxime doloribus nobis.</p> <p>Neque ut labore aut impedit eum. Enim, repellendus, cumque! Aliquam voluptas, officiis minus totam animi consectetur maxime consequuntur ratione dolor quasi repellat debitis accusantium hic placeat ipsum, nihil optio eaque!</p> <p>Maxime labore, fugiat omnis, non, impedit accusamus, tempore eos rem minima ipsum vitae. Quo repudiandae voluptate eius nisi vel commodi sint, dolorem minus, dolor, nulla dolores. Molestias voluptas accusantium libero.</p> <p>Placeat quia voluptas consequatur voluptatum, exercitationem pariatur magnam beatae nostrum nobis unde adipisci distinctio itaque ex dolores, molestias quae voluptatibus accusamus nihil tenetur eum, ea eligendi vel. Ullam perferendis, magni.</p> <p>Earum perspiciatis, quaerat ab autem, pariatur aliquid voluptatem eaque facere voluptas molestias culpa impedit debitis fuga sapiente non ratione officiis. Quisquam aliquam voluptates dolores, obcaecati sunt ipsa doloribus sint vero.</p> <p>Optio harum dolores esse impedit facilis ducimus, nihil veritatis, explicabo doloribus, assumenda veniam quam, nisi illum deleniti iure illo. Ea voluptatibus in quam repellat provident optio ipsum corporis non velit.</p> <p>Quasi dolorem amet porro, quas nam delectus labore, nostrum cum illum, fugiat dolores iste cupiditate. Architecto tempora totam iusto corporis quaerat nesciunt saepe veritatis error, maiores doloremque eaque, omnis ea.</p> <p>Quo maiores odio dolorem possimus suscipit vitae voluptates eum ullam! Ipsa aliquam at veritatis incidunt dolor, cum ut expedita explicabo autem iure! Natus quisquam neque accusantium, illum rem quaerat qui.</p> <p>Dolorem consequatur quidem, tempore et odio modi maiores quibusdam repellendus earum, ipsam itaque totam iusto. Dolorem, libero, quam in ducimus, voluptatum et repudiandae ex magni, itaque est facere qui expedita.</p> <p>Necessitatibus minima doloribus veritatis. Iusto sint, sapiente odit temporibus culpa recusandae error vitae, ut nam esse totam. Deleniti, aspernatur itaque facere quas ullam, assumenda vero, ducimus quaerat a eligendi unde.</p> <p>Debitis, voluptas vel, sint quae nisi consequuntur. Obcaecati amet, magni impedit accusantium blanditiis fugit voluptatem dicta, officiis laudantium tempore minima, veniam. Distinctio sapiente provident rem animi perspiciatis obcaecati earum amet?</p> 

Answer 2

 $(function(){ var shrinkHeader = 300; $(window).scroll(function() { var scroll = getCurrentScroll(); if ( scroll >= shrinkHeader ) { $('.header').addClass('shrink'); } else { $('.header').removeClass('shrink'); } }); function getCurrentScroll() { return window.pageYOffset || document.documentElement.scrollTop; } }); 

 .header { position: fixed; top: 0; left: 0; width: 100%; background: #cc5350; color:#fff; z-index: 1000; height: 200px; overflow: hidden; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s; text-align:center; line-height:160px; } .header.shrink { height: 100px; line-height:80px; } .header h1 { font-size:30px; font-weight:normal; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .header.shrink h1 { font-size:24px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .content { height:2000px; /*just to get the page to scroll*/ } 

 <div class="header"> <h1>Animated Fixed Header (Scroll Down)</h1> </div> <div class="content"> </div> <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 

您可以嘗試上面的代碼嗎？ 我認為這對您有幫助。

Answer 3

您可以使用CSS做到這一點

使用{position: fixed}和{top: 0}並使用z-index屬性

 #compareDiv { position: fixed; top: 0; z-index: 2; background: red; width: 100% } a { text-decoration: none; color: white; background: green; } .otherstuff { color: #999; background: #131418; text-align: justify; margin: 2em auto; padding: 3em; } 

 <div id="compareDiv"><a id="compare" href="#animatedModal" disabled class="compare-products">Compare Domestic </a> </div> <div class="otherstuff"> Spicy jalapeno bacon ipsum dolor amet ut venison leberkas proident t-bone in do pork. Excepteur proident ut officia occaecat sint. Turkey ad boudin labore chicken proident. Drumstick tongue commodo ribeye biltong tri-tip incididunt filet mignon aute spare ribs voluptate brisket short loin. Turkey burgdoggen consequat, adipisicing aliqua et doner. Meatloaf chicken sausage, pork chop reprehenderit turducken tail cupim aute fugiat. Ad shoulder kevin jowl, commodo ham hock in in incididunt quis irure. Shankle t-bone bacon incididunt, flank aute pancetta tempor andouille et shank cow. Cillum in porchetta voluptate eiusmod qui consectetur fatback aliquip tenderloin. Dolor ut ham hock consectetur, aute sunt strip steak cupim chicken. Incididunt ground round ad beef ribs ut jowl reprehenderit laborum exercitation excepteur minim esse ribeye labore. Picanha doner landjaeger, pork chop pig ea ham hock venison spare ribs fugiat flank beef ribs irure. Porchetta meatloaf hamburger, pariatur et dolore excepteur nisi cillum laborum esse boudin qui jowl. Adipisicing meatball in aute alcatra. Minim quis officia sausage magna turkey picanha nulla cow incididunt ham adipisicing pancetta. Strip steak deserunt in brisket est ut. Sed laborum eu ad ut minim tri-tip sint veniam chuck. Bresaola adipisicing tongue pork loin boudin id andouille dolor minim voluptate eiusmod reprehenderit filet mignon labore. Pariatur proident enim, landjaeger id corned beef velit esse ribeye picanha commodo nostrud reprehenderit sunt tenderloin. Eiusmod minim short ribs, cupim hamburger kielbasa ex porchetta venison enim veniam eu aute. Prosciutto leberkas occaecat corned beef. Landjaeger beef tenderloin, id rump est enim non nisi corned beef bresaola. Eiusmod fugiat andouille culpa dolore. Ex flank irure est venison pork loin consectetur pig anim aliquip laboris pork chop shank. Aliqua id magna dolor sint strip steak nostrud. Consectetur kevin cupim, aute pork belly esse shoulder ribeye bacon ea capicola venison alcatra. Flank aute porchetta ribeye picanha meatball adipisicing pork shank consequat nostrud pig. Dolore ex in sint tempor. Filet mignon cupidatat culpa porchetta. Nulla labore qui ham ad tail. Drumstick magna beef ribs, qui ribeye beef laboris corned beef. Ground round et excepteur, shoulder tri-tip enim dolore non reprehenderit cow drumstick laborum cillum nulla ut. Capicola pastrami nisi sint strip steak leberkas, brisket cupidatat hamburger jerky cupim dolor turducken. Pork pastrami laborum corned beef rump quis dolore bacon eu adipisicing bresaola turducken deserunt beef ribs. Ex ullamco burgdoggen kielbasa beef veniam shank hamburger dolor sunt adipisicing pork chop pancetta. Nostrud kevin kielbasa beef doner proident elit quis fatback tri-tip est porchetta. Sed pancetta eu cow meatloaf. Short ribs cupim sausage consectetur burgdoggen chuck ea. Magna esse nisi cillum tri-tip dolore sint frankfurter commodo. Magna turkey t-bone, sunt leberkas tri-tip esse. In leberkas sirloin, velit chicken deserunt lorem laboris occaecat exercitation chuck pork loin turkey picanha. Officia andouille reprehenderit, salami turkey frankfurter picanha commodo aliqua aliquip tail eiusmod biltong cow. Pig eiusmod reprehenderit, meatball sausage ut jowl brisket occaecat laborum rump cow ham tri-tip nisi. Boudin ex rump qui, pancetta leberkas laboris dolore beef. Consectetur in kielbasa non, cupidatat ad pork chop. Rump exercitation commodo, ut in duis burgdoggen drumstick chicken reprehenderit veniam. Tempor shoulder adipisicing ut, pariatur deserunt proident shank. Brisket landjaeger est quis andouille jowl chicken drumstick cillum. Lorem ad meatball swine short ribs shoulder ut nisi salami kevin. Adipisicing ut jerky ham officia. Adipisicing officia corned beef prosciutto non est irure fugiat jowl pork chop ball tip andouille minim commodo ut. </div>