Question

我在这里创建了一个基本的Parallax网站：

www.hrmny.co.uk

背景图片很好，就像我想要的那样。

我想更改白色幻灯片，当从下往上滑动时，有没有办法自动停止页面的中途而不是停在顶部？我可以发布代码片段来帮助，告诉我你想看到的内容。我是新来的。

感谢您的帮助

Answer 1

一个骗子的方式：

$("a[href=#slide4]").click()

这不是真正的中途，它恰好是你改变页面内容的中间位置:)）

但是如何触发幻灯片备份呢？点击“主页”链接？然后，你想中途停止而不是到达顶峰？

所以..如果用户位于页面底部找到一种方法知道你想要更改“主页”链接转到“服务”部分吗？

Answer 2

除目标位置外，您还需要获取视口的高度以及要滚动到的元素：

var targetOffset = $target.offset().top;
var targetHeight = $target.outerHeight();
var viewportHeight = window.innerHeight;

然后通过减去视口高度的一半并添加元素高度的一半来调整目标位置：

var scrollTo = targetOffset + Math.round(targetHeight / 2) - Math.round(viewportHeight / 2);

我还移动了用于获取点击功能的位置和高度的代码，以便每次用户点击时计算它，以防用户调整浏览器窗口大小或元素已更改位置或高度。

这是您网站上包含更改的最终代码：

// JQUERY FOR SLIDING NAVIGATION   
$(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) {
        // JQUERY CLICK FUNCTION REMOVE AND ADD CLASS "ACTIVE" + SCROLL TO THE #DIV   
        $(this).click(function() {
          var targetOffset = $target.offset().top;
          var targetHeight = $target.outerHeight();
          var viewportHeight = window.innerHeight;
          var scrollTo = targetOffset + Math.round(targetHeight / 2) - Math.round(viewportHeight / 2);
          $("#nav li a").removeClass("active");
          $(this).addClass('active');
          $('html, body').animate({scrollTop: scrollTo}, 1000);
          return false;
        });
      }
    }
  });
});

我可以在页面中间而不是顶部制作视差滑块吗？

2 个答案: