Javascript 我可以让视差幻灯片停在页面的一半而不是顶部吗?

Javascript 我可以让视差幻灯片停在页面的一半而不是顶部吗?,javascript,jquery,css,scroll,parallax,Javascript,Jquery,Css,Scroll,Parallax,我在这里创建了一个基本视差网站: www.hrmny.co.uk 背景图像很好,正是我想要的 我想更改白色幻灯片,当从下到上滑动时,是否有一种方法可以自动停止页面的一半,而不是停止在顶部?我可以发布一些代码片段来帮助你,只要告诉我你想看什么就行了。我是新来的 感谢您的帮助一种欺骗的方式: $("a[href=#slide4]").click() 这并不是真正的一半,它恰好是中间的,直到你改变页面的内容:) 但是你怎么才能把滑梯扳回来呢?点击“主页”链接? 然后,你想中途停下来,而不是爬到山顶

我在这里创建了一个基本视差网站:

www.hrmny.co.uk

背景图像很好,正是我想要的

我想更改白色幻灯片,当从下到上滑动时,是否有一种方法可以自动停止页面的一半,而不是停止在顶部?我可以发布一些代码片段来帮助你,只要告诉我你想看什么就行了。我是新来的

感谢您的帮助

一种欺骗的方式:

$("a[href=#slide4]").click()
这并不是真正的一半,它恰好是中间的,直到你改变页面的内容:)

但是你怎么才能把滑梯扳回来呢?点击“主页”链接? 然后,你想中途停下来,而不是爬到山顶


所以。。如果用户位于页面底部,请找到一种方法,以了解您是否希望更改“主页”链接以转到“服务”部分?

除了获取视口高度和要滚动到的元素所需的目标位置之外:

var targetOffset = $target.offset().top;
var targetHeight = $target.outerHeight();
var viewportHeight = window.innerHeight;
然后通过减去视口高度的一半并添加元素高度的一半来调整目标位置:

var scrollTo = targetOffset + Math.round(targetHeight / 2) - Math.round(viewportHeight / 2);
我还将用于获取位置和高度的代码移到了click函数中,以便在用户每次单击时计算,以防用户调整了浏览器窗口的大小或元素更改了位置或高度

这是您的站点的最终代码,包括更改:

// 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;
        });
      }
    }
  });
});

您确定在单击其中一张幻灯片时将菜单与白色幻灯片集成在一起是一个好主意吗?