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

只是想在我尝试盗取一些代码之前找出这是否可能。在滚动条上更改3个div的css属性javascript

我有一个网站建立在twitter引导与固定导航顶部。

在导航中，我有一个带有.css属性的图像，其高度和宽度设置为155px，导航栏本身的边距设置为155px，然后填充180px以补偿大的固定导航。随后是传送带（引导程序功能）。

问题是，是否可以通过更改3个div的3个css属性来调整nav的大小，因为用户滚动通过轮播。我希望导航从180px下降到30px，并且一旦用户滚动滚动鼠标，就会保持固定在页面的顶部。只是用尽更少的网页空间。踢球者是我使用响应大小，所以这只会影响在大于979px宽的设备上观看的人。任何帮助，将不胜感激。

来源

2013-07-22 user1881482

我认为这是可能的，但它会更好地展示活页。你可以在[这个页面]（http://heera.it/）上看到类似的东西，但是没有响应，但它很快就会出现。 [也请查看]（http://api.jquery.com/scroll/）。 –

你需要滚动功能

这里是根据它的演示实现菜单和风格元素类 http://jsfiddle.net/hushme/3T6LT/2/

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

}）;

来源

2013-07-22 00:19:36 Hushme

这可行，但是可以为resize事件设置动画。所以，如果他们向下滚动需要的总像素的50％的调整大小的酒吧只有在其调整大小的50％ – user1881482

我不明白请解释一下 – Hushme

最好展示一个例子... http://findandform.com – user1881482

尝试的jQuery .scroll功能

$('.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/

希望它可以帮助..

来源

2013-07-22 00:16:10 HTTP

这也适用，但是有没有一种方法可以对变换进行动画处理。请参阅http://findandform.com – user1881482

而不是使用'.css'使用'.animate'参考jquery网站以获取此功能的完整参考 – HTTP

你可以得到一个想法从这个（我前几天写了它作为an article here）

(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);

来源

2013-07-22 00:21:42

这是真正接近我正在谈论的。我可以附加一个动画功能，或者它是一个或另一个。 – user1881482

确定你可以附加一个'animate'功能。这只是基本的想法，你可以扩展它。 –

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

回答

相关问题