如果滚动出其他div，如何淡入div答案

【问题标题】：How to fade in div if other div was scrolled out如果滚动出其他div，如何淡入div
【发布时间】：2014-09-30 22:55:45
【问题描述】：

主题说明了一切。

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

如何在js中做到这一点？

【问题讨论】：

到目前为止有什么尝试吗？
Javascript 不是我的菜。我尝试了一点，但只是让我的整个 js 卡住了。我问谷歌没有有用的结果（因为没有正确的搜索词）。

标签： javascript html fade

【解决方案1】：

大概是这样的吧？

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

【讨论】：

不错的问题，但我宁愿寻找这样的东西（但在 js 中不在 vb 中；-)）：如果 divWithBigImage.visible=false 然后 divWithSmallImage.visible=true

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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>

【讨论】：

不，这将导致只有一个徽标在页面加载时根据浏览器窗口大小选择。这对我来说真的很难解释......这里link是一个答案如何在按钮单击时淡入/淡出div。我的触发器应该是元素的消失，而不是单击按钮。