Question

我在页面底部有一个菜单。到达页面顶部时，我会坚持使用。我在此菜单中有一个内部div，它具有100％的宽度。我想根据滚动将这个div宽度减小100％到60％。这意味着页面div宽度的滚动中心是否为80％。这是我粘贴菜单的js

$(window).scroll(function(){
    var navbarScrollTop = $('.content').offset().top - $(window).scrollTop();
    if(navbarScrollTop < 75){
        $('nav.navbar').addClass('stickNow');
    } else{
        $('nav.navbar').removeClass('stickNow');
    }
});

这是工作中的jsfiddle https://jsfiddle.net/w407uokd/35/

Answer 1

类似的东西吗？

$(window).scroll(function() {
  var navbarScrollTop = $('.content').offset().top - $(window).scrollTop();
  if (navbarScrollTop < 75) {
    $('.menu').addClass('stickNow');
  } else {
    $('.menu').removeClass('stickNow');
  }
  var maxScrollTop = $(document).height() - $(window).height();
  var menuWidth = 100 - 40 * ($(window).scrollTop() / maxScrollTop);
  $('.menu').css('width', menuWidth + '%');
});

.wrapper {
  width: 100%;
  position: relative;
  height: 450px;
}

.menu {
  width: 100%;
  height: 75px;
  background: red;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px;
}

.inner-div {
  width: 100%;
  background: yellow;
  height: 100%;
}

.stickNow {
  position: fixed;
  top: 0;
  left: 0;
  bottom: auto;
  width: 100%;
  z-index: 99999999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">

  <div class="menu">
    <div class="inner-div"></div>
  </div>

</div>

<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, quia? Labore sit numquam voluptatibus minima, similique odit quisquam mollitia ea repudiandae. Repellat sint ad sunt itaque qui asperiores deleniti nostrum numquam dicta. Quod neque
  quos dignissimos necessitatibus vel repellat laborum iusto, tempore nostrum, eaque debitis nobis asperiores officiis ipsam minus dolore facere illum nisi cumque provident, repellendus amet perferendis ducimus! Eligendi deleniti quos veritatis fugiat
  expedita voluptatum asperiores, id dignissimos eaque dolores iste, nobis odio nemo, non, cumque aut ad culpa atque. Corporis qui architecto iste mollitia assumenda excepturi non. Consequuntur voluptas, iure. Modi, expedita neque. Deleniti consequatur,
  quasi, quod est earum nulla illum, quo et voluptatum voluptates atque consectetur cum eum voluptas ea quas! Vero doloribus, dolore distinctio deserunt, nesciunt laborum nemo tempore voluptate perferendis incidunt ad alias aspernatur, exercitationem
  asperiores, dolor eum consequatur. Delectus expedita amet aut provident facilis, cupiditate voluptatum iure, veniam quia, nisi eligendi dolores asperiores similique modi vero at est rerum nemo vitae quam! Nemo dolorum magni atque et necessitatibus deserunt
  tempora id, praesentium sapiente voluptatibus vero sunt omnis quibusdam voluptate quod repellat fugit esse ullam nostrum illum, magnam excepturi laboriosam! Aliquam, aspernatur quos porro quisquam nihil vitae. Ratione neque voluptas voluptatem, reiciendis
  veritatis cumque quia consectetur error aliquam perferendis exercitationem ipsa pariatur natus delectus. Aut magni, vitae at autem iure temporibus recusandae vero hic a eos aperiam iusto quam facere molestias consequuntur minima. Veritatis at saepe,
  iure ipsa culpa omnis placeat quasi iste? Qui dignissimos fuga dicta quas aliquid tempora. Voluptatum necessitatibus cum, nihil sed, qui dolores nesciunt ea aliquam dolore sequi rerum esse, eligendi modi totam quod voluptatibus dolorem fugit aperiam,
  consequuntur? Quos beatae iure atque vitae exercitationem cupiditate aspernatur, magnam neque pariatur rem autem quod, est placeat quas sed suscipit molestiae! Sunt illo omnis perspiciatis repellendus expedita quibusdam. Cumque in porro laborum quam,
  minima consequuntur itaque fugit aspernatur, amet saepe voluptate sapiente eos distinctio sint? Cum placeat officiis alias fugiat pariatur laudantium libero possimus consequuntur fuga, illo repellendus quod nulla atque dignissimos quia, accusantium
  odio ducimus soluta. Molestiae mollitia aliquam magnam quis modi labore accusantium aspernatur possimus sapiente, ullam animi doloremque, nisi molestias fugit voluptas, similique debitis. Officia doloribus provident vitae, delectus cupiditate ducimus
  dolore consequuntur totam, repudiandae ipsam distinctio saepe perferendis cum ipsum quod excepturi, dolorum expedita sed fugiat, eum aspernatur ratione minima. Ipsa officia quam facere eligendi nesciunt, in dolore fugiat nihil totam error necessitatibus
  rem aliquid ducimus, illo cumque, consequatur accusantium pariatur porro praesentium. Dignissimos, ea, autem. Animi obcaecati, nemo facere. Commodi similique veniam, necessitatibus aliquid quam aliquam reprehenderit, esse earum dolores facilis ab provident
  ratione accusantium deserunt a laudantium, eligendi quibusdam eius in adipisci molestiae dignissimos, ea cumque rem. Porro ab placeat vel repellat excepturi debitis officia odio, perferendis necessitatibus nisi deserunt enim quaerat commodi doloribus
  asperiores ea ipsum. Harum ullam, officiis nesciunt, aut quod inventore minus praesentium dolor, optio quae, modi quibusdam quis quos delectus vel dolore fugiat quisquam consequatur ipsam? Nemo iste pariatur doloremque nostrum eaque ullam a minima ex
  reprehenderit ut amet, in, impedit, repellat!
</div>

通过滚动减小div宽度

1 个答案: