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-index并解决了。

谢谢你们

Answer 1

在处理此案件时，您需要记住两件事：

您必须永远不要比较移动 <div>作为参考并设置CSS。
另外，只使用JS 添加或删除类并使用CSS设置定位。

我会做的事情是：

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

$sql = "UPDATE Football.PlayerTeams SET QB = '$value2' WHERE Password = '$value1';";

$sql = "UPDATE Football.PlayerTeams SET QB = '".$value2."' WHERE Password = '".$value1."'";

$(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;
    }
});

请您尝试上面的代码吗？我认为这对你有帮助。

Answer 3

您可以使用CSS

执行此操作

使用{position: fixed}和{top: 0}并使用z-index属性

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

滚动时修复了页面顶部的对象

3 个答案: