Question

我查看了不同的帖子，并找到了类似的解决方案，但没有一个允许我做我需要的。我正在尝试复制此网址http://www.envisionboston.com/

上的效果

当图像到达页面顶部时，徽标会切换，div会改变大小......过去我找到了一种方法来设置某个div何时到达页面顶部，您可以更改或添加到css元素。

当图片到达顶部时，在它到达顶部<div class="topbar">之前，您将其更改为<div class="topbar fixed">

我遇到的另一个问题是他们有Headway主题，它不允许我编辑所有内容，所以div是ID而不是CLASS，我不确定这是否会改变，但它可能会发生。

我知道这应该是我能够弄明白的事情，但我已经在这几个小时了！

Answer 1

所以，我花了一些时间在stackoverflow上找到了这个很好的答案，以便在滚动时更改不透明度，并将其与类删除/添加条件相结合：

jsfiddle demo

超级有用的stackoverflow线程，链接到jsfiddle，用于滚动更改不透明度：

Change div opacity on scroll

就使图像看起来“更小”的效果而言，它实际上是一种幻觉。图像的div溢出被隐藏，因此在滚动事件中，javascript调整上边距，“推”下来。这基本上将图像推到＆lt; div>在它下面。当我有更多的时间，我会看看我是否也可以将其解决。干杯

具有所需效果的页面： http://www.envisionboston.com/

代码块由上面提到的Stack链接提供：

function fader() {
    var b = $('.blue'),
        wh = $(window).height(),
        dt = $(document).scrollTop(),
        elView, opacity;
        h = $("#headerArea").height();
    b.each(function () {
        elView = wh - ($(this).offset().top - dt);

        if (window.pageYOffset > (h + 50)) {
            $("#headerArea").removeClass("withHeader").addClass("withoutHeader");
        } else {
            $("#headerArea").removeClass("withoutHeader").addClass("withHeader");
        }
        if (elView > 0) { // Top of DIV above bottom of window.
            opacity = 1 - 1 / (wh + $(this).height()) * elView;
            if (opacity > 0) // Bottom of DIV below top of window.
            $(this).css('opacity', opacity);
        }
    });
}
// Event on scroll
$(document).bind('scroll', fader);

<小时/> 原始答案：

根据您列出的“site.js”文件的链接，以下是实现此目的的代码：

查看HTML文件，您将找到被引用的类“.main-image-wrapper”
代码检查是否存在所需的类

if (Y.one('.main-image-wrapper'))

然后说如果页面的当前垂直位置大于主图像高度+ 80像素，则添加一个隐藏标题的类

if ( (window.pageYOffset > (this.mainImageHeight + 80)) ) {
                Y.one('body').addClass('header-hidden');

该类被以上记录的条件的else删除。您还会注意到标题高度也会在其他条件中更改。

  else {
            Y.one('body').removeClass('header-hidden');
            this.headerHeight = header.get('offsetHeight');
 }

有大量的造型和其他细微之处发生，但基本上：检查你的y位置在页面上的位置，如果这大于你的图像高度+所需像素的数量（在这种情况下为80），那么添加一个类隐藏标题;否则，显示它。

以下完整的代码块供您参考。

if (Y.one('html.no-window-orientation')) {
      var scrollStates = function () {
        if (Y.one('.main-image-wrapper')) {
          // 80 is main content padding
          if ( (window.pageYOffset > (this.mainImageHeight + 80)) ) {
            Y.one('body').addClass('header-hidden');
            this.headerHeight = header.get('offsetHeight');
            if (Y.one('.contact-inner-wrapper')) {
              Y.all('.contact-inner-wrapper').setStyle('marginTop', (this.headerHeight + 5));
            }
          } else {
            Y.one('body').removeClass('header-hidden');
            this.headerHeight = header.get('offsetHeight');
            if (Y.one('.contact-inner-wrapper')) {
              Y.all('.contact-inner-wrapper').setStyle('marginTop', (this.headerHeight + 5));
            }
          }
          Y.one('.main-image-wrapper').setStyle('opacity', (1 - (window.pageYOffset / parseInt(Y.Squarespace.Template.getTweakValue('bannerImageHeight'), 10))));
          Y.one('.main-image-wrapper').setStyle('top', -(window.pageYOffset / 3));
        } else {
          if ( (window.pageYOffset >= 80) ) {
            Y.one('body').addClass('header-hidden');
            this.headerHeight = header.get('offsetHeight');
            if (Y.one('.contact-inner-wrapper')) {
              Y.all('.contact-inner-wrapper').setStyle('marginTop', (this.headerHeight + 5));
            }
          } else {
            Y.one('body').removeClass('header-hidden');
            this.headerHeight = header.get('offsetHeight');
            if (Y.one('.contact-inner-wrapper')) {
              Y.all('.contact-inner-wrapper').setStyle('marginTop', (this.headerHeight + 5));
            }
          } 
        }
      };

  scrollStates();
  Y.one(window).on('scroll', function() {
    scrollStates();
  });
}

Answer 2

感谢您的反馈它被使用并且真的很有帮助，我所做的如下，如果您有任何提示原因我做了一些不是最好的方式让我知道因为我还在学习jQuery

由于

<script>


jQuery(function ($) {

  $(window).load(function() {

    if ( $('.home').length) { 

    $(window).scroll(function() {
      var height = $(window).scrollTop();
          if(height  > 500 ) {
            $('#wrapper-7').addClass( "wrapper-7-changed" ); 
            $('.wrapper-mirroring-7').addClass( "wrapper-mirroring-7-changed" ); 
            $('.social-icon').addClass( "social-icon-changed" ); 
            $('#block-7 li.widget').addClass( "widget-changed" );

            $('#block-1').addClass( "block-1-changed" );

            $('#block-9').addClass( "block-9-changed" );

            $('#wrapper-6').addClass( "wrapper-6-changed" );
            $('.wrapper-mirroring-6').addClass( "wrapper-mirroring-6-changed" );

          } else {
            $('#wrapper-7').removeClass( "wrapper-7-changed" );
            $('.wrapper-mirroring-7').removeClass( "wrapper-mirroring-7-changed" ); 
            $('.social-icon').removeClass( "social-icon-changed" );
            $('#block-7 li.widget').removeClass( "widget-changed" );
            $('#block-1').removeClass( "block-1-changed" );
            $('#block-9').removeClass( "block-9-changed" );
            $('#wrapper-6').removeClass( "wrapper-6-changed" );
            $('.wrapper-mirroring-6').removeClass( "wrapper-mirroring-6-changed" );
          }   

       });

    } else {

    $(window).scroll(function() {
      var height = $(window).scrollTop();
          if(height  > 50 ) {
            $('#wrapper-7').addClass( "wrapper-7-changed" ); 
            $('.wrapper-mirroring-7').addClass( "wrapper-mirroring-7-changed" ); 
            $('.social-icon').addClass( "social-icon-changed" ); 
            $('#block-7 li.widget').addClass( "widget-changed" );

            $('#block-1').addClass( "block-1-changed" );

            $('#block-9').addClass( "block-9-changed" );

            $('#wrapper-6').addClass( "wrapper-6-changed" );
            $('.wrapper-mirroring-6').addClass( "wrapper-mirroring-6-changed" );

          } else {
            $('#wrapper-7').removeClass( "wrapper-7-changed" );
            $('.wrapper-mirroring-7').removeClass( "wrapper-mirroring-7-changed" ); 
            $('.social-icon').removeClass( "social-icon-changed" );
            $('#block-7 li.widget').removeClass( "widget-changed" );
            $('#block-1').removeClass( "block-1-changed" );
            $('#block-9').removeClass( "block-9-changed" );
            $('#wrapper-6').removeClass( "wrapper-6-changed" );
            $('.wrapper-mirroring-6').removeClass( "wrapper-mirroring-6-changed" );
          }   

       });



    }

  });

}); 
</script>

混合使用的CSS可能太多而不能发布但只是使用了CSS3的过渡效果所以当它添加类时它会'移动'

当另一个div点击页面顶部时，简单的CSS更改

2 个答案: