css 使用jQuery检测屏幕中是否有元素然后应用/删除具有转换为动画元素的类。

Posted 2021-05-13

/***
 * Be Mindful of specificity issues
 ***/
(function($) {
    /* Vars */
    var ev_animate_me = $(".masthead");
    var ev_scroll_past_me = $(".hero");
    /* Every time the window is scrolled ... */
    $(window).scroll(function() {
        /* Check the location of each desired element */
        $(ev_scroll_past_me).each(function(i) {
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop();
            /* If the object has been scrolled past, fade IN the header with CSS transition */
            if (bottom_of_window > bottom_of_object - 100) {
                /* First use fixed height so transition runs smoothly */
                $(ev_animate_me).addClass("ev-animte-in");
                /* height: 0 */
                $(ev_animate_me).removeClass("ev-element-back-in-view");
            }
            /* If the object has been scrolled into view, fade OUT the header with CSS transition */
            if (bottom_of_window < bottom_of_object - 100) {
                $(ev_animate_me).removeClass("ev-animte-in");
                $(ev_animate_me).addClass("ev-element-back-in-view");
            }
        });
    });
})(jQuery);

.masthead {
  background: none;
  background: #FFF;
  border-bottom: 3px solid #EEE;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  overflow: hidden;
  position: fixed;
  z-index: 9999999;
  height: 0;
  /* fixes the header flickering in Chrome while scrolling */
  -webkit-transform: translate3d(0, 0, 0);
}

.ev-animte-in {
  height: 103px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media all and (max-width: 959px) {
  .ev-animte-in {
    /* setting min-height of header on mobile devices animates header smoothly*/
    min-height: 156px;
    /* Allows navigation menu to expand */
    height: auto;
    opacity: 1;
  }
}

.ev-element-back-in-view {
  opacity: 0;
  height: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}



/************
    SASS (compass)
************/

/**********

.masthead {
    background: none;
    background: #FFF;
    border-bottom: 3px solid #EEE;
    @include transition(all 0.3s ease);
    overflow: hidden;
    position: fixed;
    z-index: 9999999;
    height:0;
    -webkit-transform: translate3d(0,0,0);
}

.ev-animte-in {
    height: 103px;
    @media all and (max-width: 959px) {
      min-height: 156px;
      max-height: 400px;
      height: auto;
      opacity:1;
    }
    @include transition(all 0.3s ease);
}
.ev-element-back-in-view {
    opacity: 0;
    height: 0;
    @include transition(all 0.3s ease);
}

**********/