Question

我有一个固定的标题函数，如下所示。我希望在窗口大小调整时动态更改“100”值。我试图将所有内容包装成“if（screen.width＆gt; = 1200）”或“jQuery（window）.on（'resize'，function（）”但这种东西只适用于页面刷新。

jQuery(document).ready(function($) {
var $window = $(window),
    $stickyEl = $('.tabsmenu > ul'),
    elTop = $stickyEl.offset().top - 100;

$window.scroll(function() {
    if ($window.scrollTop() < 900) {
        $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
    } else {
     $stickyEl.removeClass('sticky');
 }
 }); 
});

任何提示？

Answer 1

这可能不完美但是我认为你想要做什么以及我会这样做。这只是得到滚动值，然后做一些数学来计算它需要改变多少。我添加了一堆内容让它滚动。

window.onload = function() {
  $("#everything").scroll(function() {
    var startAt = 40; //How many pixles scrolled to start effect, 0 would match link
    if ($("#everything").scrollTop() >= startAt) {
      var scroll = $("#everything").scrollTop(),
        total = 0, // go to this value
        distance = 40, //distance to shrink
        value = (scroll < distance) ? total : total + (distance - (scroll - startAt));

      $("#head").css("height", value); //change #head to what ever you want to shrink
    } else {
      $("#head").css("background-color", value);
    }
  });
}

html,
body {
  overflow: hidden;
  /* Disables regular scrolling */
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
#everything {
  overflow: scroll;
  /* enables content to scroll */
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 40px;
}
#head {
  width: 100%;
  height: 40px;
  background-color: red;
  position: fixed;
  top: 0px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <div id="everything">
    <div id="head">header</div>
    <span>
Text Following text is so the page can scroll: <br/>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta velit eu turpis imperdiet congue. Morbi nec mi ipsum. Nam eu nunc in lorem sagittis feugiat a quis nisl. Donec suscipit leo quis magna egestas, id convallis leo gravida. Curabitur finibus lectus ut metus feugiat, eu tincidunt eros tempor. Fusce facilisis nunc vulputate, posuere velit nec, ultrices diam. Vestibulum aliquam velit in lectus imperdiet, vitae condimentum lectus finibus. Aliquam ac arcu eget velit molestie rhoncus. Etiam rhoncus, tellus nec lacinia porta, diam lorem ultrices sem, et dignissim ipsum augue non augue. Suspendisse tincidunt felis sit amet orci accumsan, at ornare tellus viverra. Nam viverra nulla in urna elementum ornare.Sed interdum nisi libero, id porta turpis consectetur vitae. Curabitur nunc ex, interdum eget hendrerit maximus, faucibus non est. Etiam scelerisque condimentum eleifend. Integer ac ligula eget magna porta tristique at eu neque. Sed venenatis ipsum non metus sodales finibus. Suspendisse nec nunc lobortis ligula venenatis tristique. Suspendisse aliquam leo elit, et pretium ipsum tempor sed. Maecenas tincidunt dictum leo sit amet accumsan. Nullam eu viverra nulla. Aenean vehicula tellus a mauris malesuada interdum. Sed libero lacus, consectetur at condimentum vel, egestas vitae nisl.Mauris facilisis tincidunt magna, at gravida elit. Cras molestie eros sed tincidunt ultricies. Pellentesque eleifend egestas orci, sit amet condimentum nisl semper eleifend. Sed ipsum elit, aliquet nec lacinia a, maximus eu dolor. Quisque finibus efficitur odio gravida convallis. Vivamus nec velit in est ornare luctus at a risus. In hac habitasse platea dictumst. Proin condimentum eget est non posuere. Vivamus ante quam, bibendum in tincidunt ut, egestas sed mauris. Nunc non interdum nibh, nec ornare tellus. In interdum elit nisi, a interdum est tempor id. Cras a elit ut purus ornare mollis sit amet ut est. Cras ut ex sed neque lacinia accumsan quis aliquet turpis. Quisque nisl nunc, pretium sed lectus pretium, lacinia ornare magna. Curabitur sit amet felis turpis. Morbi nisi mi, mattis quis tempor ut, accumsan nec ex.
      </span>
  </div>
</body>

</html>

在调整大小和窗口滚动时动态更改值

1 个答案: