【问题标题】: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。我的触发器应该是元素的消失,而不是单击按钮。
    猜你喜欢
    • 2012-05-25
    • 1970-01-01
    • 2012-03-15
    • 2018-05-04
    • 2013-02-20
    • 1970-01-01
    • 1970-01-01
    • 2016-03-09
    • 1970-01-01
    相关资源
    最近更新 更多