Question

主题说明了一切。

只是摆弄一页的布局。页面的第一部分显示div中的图像。如果徽标已滚动到可见区域之外，则导航栏中将显示另一个徽标图像较小的div。当然，如果大徽标再次滚动，小徽标应该会消失。

如何在js中做到这一点？

Answer 1

可能是这样的吗？

   $(window).scroll(function() {
        if ($('#element').visible(true)) {
          // show big logo
        } else {
          // show small logo
        }
   });

Answer 2

JavaScript的：

// Document ready
jQuery(document).ready(function(){

    // When window is resized
    jQuery(window).bind("resize", function(){

        // If big logo does not fit in container
        if (jQuery("#big").width() >= jQuery("#container").width()) {

            // Big out, small in
            jQuery("#big").fadeOut(function(){
                jQuery("#small").fadeIn();
            });

        // If big logo fits in container
        } else {

            // Small out, big in
            jQuery("#small").fadeOut(function(){
                jQuery("#big").fadeIn();
            });

        }

    });

});

HTML：

<div id="container">
    <img id="big" src="big.png" alt="big" />
    <img id="small" src="small.png" alt="small" style="display: none;" />
</div>

Answer 3

你有没有看过jQuery Waypoints？ http://imakewebthings.com/jquery-waypoints/

我认为您正在尝试做类似粘性菜单示例http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/应该很容易更改以满足您的需求。

如果其他div被滚动，如何淡入div

3 个答案: