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/

上面提到的堆栈链接提供的代码块:

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/