Question

我有以下代码，当用户滚动时，会将.stick类应用于＃s-nav。

$(document).ready(function() {

$(window).scroll(function() {
  if ($(window).scrollTop() > 300) {
    $('#s-nav').addClass('stick');
    $('#s-nav_placeholder').css({display: 'block'});
  }
  if ($(window).scrollTop() < 300) {
    $('#s-nav').removeClass('stick');
    $('#s-nav_placeholder').css({display: 'none'});
  }
});

});

CSS

#s-nav {
  height: 70px;
  width: 100%;
  position: relative;
  -webkit-transition: top 0.75s ease;
  -moz-transition: top 0.75s ease;
  -ms-transition: top 0.75s ease;
  -o-transition: top 0.75s ease;
  transition: top 0.75s ease;
}

#s-nav_placeholder {
  height: 70px;
  width: 100%;
  display: none;
}

#s-nav.stick {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
}

当.stick类被应用时，我希望它从顶部过渡。问题是我不知道如何从屏幕“启动”div，因为它成为内容的一部分＆lt; 300 px从顶部

Answer 1

试试这个。将css修改为

#s-nav.stick {
  position: fixed;
  top: -100%; left: 0; right: 0;
  z-index: 999;       
 -webkit-transition:  0.75s  ;
 -moz-transition:     0.75s  ;
 -ms-transition:      0.75s  ;
 -o-transition:       0.75s  ;
 transition:          0.75s  ;
}

然后像这样添加$('#s-nav').css('top','0');。

$(document).ready(function() {

$(window).scroll(function() {
  if ($(window).scrollTop() > 300) {
    $('#s-nav').addClass('stick');

    /*new line of code */
    $('#s-nav').css('top','0');

    $('#s-nav_placeholder').css({display: 'block'});
  }
  if ($(window).scrollTop() < 300) {
    $('#s-nav').removeClass('stick');

    /*new line of code */        
    $('#s-nav').css('top','-50%'); 

    $('#s-nav_placeholder').css({display: 'none'});
  }
});

});

检查这个jsfiddle：https://jsfiddle.net/jayakrishnancn/61s0oLLs/1/

应用固定位置时的转换div

1 个答案: