粘性菜单 - 如何让图像尽快出现？＃34;粘贴＆＃34;？

Question

我有一个粘滞的菜单栏，当我在我放置锚点的标题下方滚动时会开始粘贴。

效果很好但是我想在它开始时左侧出现一个图像＆＃34;坚持＆＃34;。我在newyorker.com上看到了同样的效果。

我该怎么做？

这是我的代码，它坚持下去：

$(window).scroll(function(e) {
   var scroller_anchor = $(".scroller_anchor").offset().top;

   if ($(this).scrollTop() >= scroller_anchor && $('.scroller').css('position') != 'fixed')
   {    
      $('.scroller').css({
         'position': 'fixed',
         'top': '0px'
      });

      $('.scroller_anchor').css('height', '50px');
   }
   else if ($(this).scrollTop() < scroller_anchor && $('.scroller').css('position') != 'relative')
   {    

      $('.scroller_anchor').css('height', '0px');

      $('.scroller').css({
        'position': 'relative'
      });
   }
});

Answer 1

让 CSS 为您执行此操作..只需将“showed类”添加到“粘贴”图像上，然后在“粘贴”时将其删除

CSS

.home_image{
    display: none;
    float: left;
    height: 50px;
    width: 50px;
}

.home_image.showed{
    display: block;
}

的JavaScript

$(window).scroll(function(e) {
   var scroller_anchor = $(".scroller_anchor").offset().top;

   if ($(this).scrollTop() >= scroller_anchor && $('.scroller').css('position') != 'fixed')
   {    
      $('.scroller').css({
         'position': 'fixed',
         'top': '0px'
      });

      $('.home_image').addClass('showed');

      $('.scroller_anchor').css('height', '50px');
   }
   else if ($(this).scrollTop() < scroller_anchor && $('.scroller').css('position') != 'relative')
   {    

      $('.scroller_anchor').css('height', '0px');

      $('.scroller').css({
        'position': 'relative'
      });

      $('.home_image.showed').removeClass('showed');
   }
});

不添加类的另一种方法：

CSS

.home_image{
    display: none;
    float: left;
    height: 50px;
    width: 50px;
}

的JavaScript

$(window).scroll(function(e) {
   var scroller_anchor = $(".scroller_anchor").offset().top;

   if ($(this).scrollTop() >= scroller_anchor && $('.scroller').css('position') != 'fixed')
   {    
      $('.scroller').css({
         'position': 'fixed',
         'top': '0px'
      });

      $('.home_image').css({
        'display': 'block'
      });

      $('.scroller_anchor').css('height', '50px');
   }
   else if ($(this).scrollTop() < scroller_anchor && $('.scroller').css('position') != 'relative')
   {    

      $('.scroller_anchor').css('height', '0px');

      $('.scroller').css({
        'position': 'relative'
      });

      $('.home_image').css({
        'display': 'none'
      });
   }
});