Question

这是我的剧本

$(window).bind('scroll', function () {

    if ($(window).scrollTop() > 20) {

      $('#navmenu').css('position', 'fixed');
      $('#navmenu').css('background', 'black');
      $('#navmenu').css('width', '100%');
      $('#navmenu').css('margin-left', '0%');
      $('#navmenu').css('opacity', '0.9');
      $('#navmenu').css('height', '35%');
      $('#navmenu').css('margin-top', '2.2%');


    } else {
        $('#navmenu').css('position', 'relative');
        $('#navmenu').css('background', 'transparent');
        $('#navmenu').css('opacity', '1');
        $('#navmenu').css('margin-top', '0px');   
   }

} );

在这里你可以看到我的问题。 PROBLEM 脚本在大帖子上效果很好但在小帖子上我有这个bug。如何解决..

Answer 1

我先向您展示.css()可以像

一样使用

$(window).bind('scroll', function () {
    if ($(this).scrollTop() > 20) {
          $('#navmenu').css({
          'position', 'fixed',  //change to absolute
          'background', 'black',
          'width', '100%',
          'margin-left', '0%',
          'opacity', '0.9',
          'height', '35%',
          'margin-top', '2.2%'
        });
    }   else {
        $('#navmenu').css({'position', 'relative',
            'background', 'transparent',
            'opacity', '1',
            'margin-top', '0px'
       });
   }
});

问题在于设置 position

删除'position', 'fixed'或使用 absolute 定位。

fixed
不要为元素留出空间。相反，将其放置在相对于屏幕视口的指定位置，滚动时不会移动。打印时，将其放在每页的固定位置。

无论何时滚动，都会将位置设置为固定，因此会发生闪烁。

jquery脚本不起作用

1 个答案: