javascript - 在滚动javascript上更改3个div的css属性

Question

只是想在我尝试破解一些代码之前找出这是否可能。

我有一个基于 twitter 引导程序的网站，顶部有一个固定导航。

在导航中，我有一个图像，其 .css 属性设置为高度和宽度，导航栏本身的边距设置为 155 像素，然后是 180 像素的主体填充以补偿大的固定导航。接下来是轮播（引导功能）。

问题是，是否可以通过在用户滚动经过轮播时更改 3 个 div 的这 3 个 css 属性来调整导航的大小。我希望导航从 180 像素下降到 30 像素，并在用户滚动经过轮播后保持固定在页面顶部。只是为了使用更少的页面空间。更重要的是我使用的是响应式大小，所以这只会影响在大于 979px 宽的设备上查看的人。任何帮助，将不胜感激。

Answer 1

你需要滚动功能

这是菜单和样式元素上的演示实现类 http://jsfiddle.net/hus​​hme /3T6LT/2/

$(window).scroll(function () {
var sc = $(window).scrollTop()
if (sc > 50) {
    $("#menu").addClass('small')
} else {
     $("#menu").removeClass('small')
}

});

Answer 2

你可以从中得到一个想法（我几天前在这里写了一篇文章）

(function( $ ){
    $.fn.stickyMenu = function( options ) {
        var $this = this,
        defaults = {
            'left' : 0,
            'top' : 0,
            'menu_offset_top' : $this.offset().top
        },
        settings = $.extend({}, defaults, options);
        $(window).on('scroll.stickyMenu', function(){
            if ($(window).scrollTop() > settings.menu_offset_top)
            {
                $this.css({
                    'position': 'fixed',
                    'top':settings.left,
                    'left':settings.top,
                    'zIndex':9999
                });
            }
            else
            {
                $this.css({
                    'position': 'relative',
                });
            }
        });
        return $this;
    };
})(jQuery);

Answer 3

试试.scrolljquery的功能

$('.yourSelector').scroll(function(){
    //use the css function to change or resize the 3 divs
}));

你可以有一个jquery的完整参考http://api.jquery.com/scroll/

和.css功能http://api.jquery.com/css/

希望能帮助到你..