Question

因此，我一直在尝试使用视差滚动和流畅的动画导航创建一些1页面布局网站。

到目前为止，平滑动画工作正常，但在为背景图像创建视差滚动时会出现问题。滚动时绝对没有任何反应。

这里是来自html的所有脚本信息：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script src="js/jquery.stellar.min.js"></script>
<script>$.stellar();</script>
<script>
$(document).ready(function() {
$('a[href*=#]').each(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
  var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
  var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
   if ($target) {
     var targetOffset = $target.offset().top;
     $(this).click(function() {
        $("#nav li a").removeClass("active");
        $(this).addClass('active');
       $('html, body').animate({scrollTop: targetOffset}, 1000);
       return false;
     });
    }
    }
});

});
</script>

尝试申请元素时：

<div id="slide1" data-stellar-background-ratio="0.5">
</div>

最后是css：

#slide1{
background:url('../img/kansi.jpg') 50% 0 no-repeat;
background-attachment: fixed;
height: 600px;
margin: 0;
padding: 200px 0 260px 0;
background-size: cover;
}

得到高兴的赞赏！：）

编辑：在JSFiddle中重现了渐变来模拟图片。 https://jsfiddle.net/sL1uszex/2/

无法让stellar.js工作

0 个答案: