javascript - 在滚动条上将导航文本旋转 45 度

Question

我正在尝试重新创建此处显示的类似顶部菜单导航:https://www.avenircreative.com/- 滚动时将文本旋转 45 度- 向上滚动保持正常

我找到了可能有用的类似代码，但我无法将其旋转回 scrollTop。

$(window).scroll(function() {

  // get the variable of how far we've scrolled from the top
  var offset = $(window).scrollTop();
    offset     = offset * 10;

  // add css transform with the offset variable
  $('#sp-links a').css({
    '-moz-transform': 'rotate(' + offset + 'deg)',
    '-webkit-transform': 'rotate(' + offset + 'deg)',
    '-o-transform': 'rotate(' + offset + 'deg)',
    '-ms-transform': 'rotate(' + offset + 'deg)',
    'transform': 'rotate(' + offset + 'deg)',
  });

});

取自:https://codepen.io/chrisoncode/pen/mlJbD

尝试用 '-webkit-transform': 'rotate(45deg)' 替换 rotate 但它不能使 scrollTop 正常运行

Answer 1

制作类似的东西:

if ( offset < 0 ) {
  offset = 0;
}else if ( offset > 45) {
  offset = 45;
}

这样，一旦达到 0，旋转就会停止，并且永远不会高于 45 度。

下面的工作示例

$(window).scroll(function() {
  
  // get the variable of how far we've scrolled from the top
  var offset = $(window).scrollTop();
	offset     = offset;
  
  if ( offset < 0 ) {
    offset = 0;
  }else if ( offset > 45) {
    offset = 45;
  }

  // add css transform with the offset variable
  $('#sp-links a').css({
    '-moz-transform': 'rotate(' + offset + 'deg)',
    '-webkit-transform': 'rotate(' + offset + 'deg)',
    '-o-transform': 'rotate(' + offset + 'deg)',
    '-ms-transform': 'rotate(' + offset + 'deg)',
    'transform': 'rotate(' + offset + 'deg)',
  });
  
});

/* change box sizing so padding behaves appropriately */
* { 
  box-sizing:border-box; 
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
}

/* set body height so we can scroll */
body        { min-height:2000px; }
h2 small 	{ color:#BBB; font-weight:normal; }

/* basic positioning of 3 buttons */
#sp-links   { padding-top:20px; position:fixed; text-align:center; width:100%; }

/* styling each circle */
#sp-links a { color:#FFF; display:inline-block; font-size:80px; height:120px; margin:0 30px; padding-top:20px; width:120px;
  border-radius:50%;
  -moz-border-radius:50%;
  -o-border-radius:50%;
  -webkit-border-radius:50%; 
}

  /* set the background color of each circle */
  #sp-facebook { background:#43609C; }
  #sp-twitter  { background:#1CC1F7; }
  #sp-google   { background:#DD4C3B; }

.info { position:fixed; bottom:5%; width:100%; text-align:center; line-height:1.5; color:#333; }
.info a { text-decoration:none; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- OUR LINKS -->
<div id="sp-links">
  <h2>Rotating Icons on Scroll <small>use the scrollbar</small></h2>
  
	<a id="sp-facebook" href="#"><span class="fab fa-facebook-f"></span></a>
	<a id="sp-twitter" href="#"><span class="fab fa-twitter"></span></a>
	<a id="sp-google" href="#"><span class="fab fa-google-plus"></span></a>
</div>