javascript - 当另一个 div 到达页面顶部时，简单的 CSS 发生变化

Question

我看过不同的帖子并找到了类似的解决方案，但没有一个能让我做我需要的。我正在尝试复制在此 URL http://www.envisionboston.com/ 上找到的效果

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

在它到顶部之前<div class="topbar">当图像到达顶部时，您将其更改为类似 <div class="topbar fixed"> 的内容

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

我知道这应该是我应该能够弄清楚的事情，但我已经研究了好几个小时了!

Answer 1

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

jsfiddle demo

super 有用的 stackoverflow 线程，带有指向 jsfiddle 的链接，用于更改滚动时的不透明度:

Change div opacity on scroll

就使图像看起来“变小”的效果而言，这实际上是一种错觉。图片的 div 溢出是隐藏的，所以在滚动事件中，javascript 调整上边距，将其“向下推”。这实质上将图像推到其下方的

下。当我有更多时间时，我会看看我是否也可以将其纳入答案。干杯

具有预期效果的页面: 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 条件下，页眉高度也发生了变化。

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

关于javascript - 当另一个 div 到达页面顶部时，简单的 CSS 发生变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24315598/