TL; DR

Question

我需要什么：

默认情况下显示'article_footer'
当我通过'article_footer_base'＆gt; 'article_footer'隐藏
当我向后滚动时，通过'article_footer_base'＆gt; 'article_footer'然后再次可见。

尝试了一百万件事 - 无法让它发挥作用:(帮助！？下面根本就没有真正起作用。我一直试图抓住SO的东西

我的HTML：

<div class="d3-d10">
<div class="article_header">
    <h1>{{ title }}</h1>
        <ul class="center">
            <li><a href="/profile/{{ username }}" class="user_avatar">{{ gravatamatic:quicky
                email = "{email}"
                size  = "32"
                }}</a></li>
            <li><a href="/profile/{{ username }}">{{ username }}</a> on {{ current_date format="M jS, Y" }}</li>
        </ul>
    </div>
</div>
<div class="d3-d10 article_content">
    {{ copy }}
</div>
<div class="d3-d10 source_link article_block_element">
{{ if source_link }}
    <p class="center">Article originally published at {{ source_link }}</p>
{{ /if }}
    <span class="icon-emblem"></span>
</div>
<div class="d3-d10 article_block_element article_footer_base">
    <ul class="left">
    <li><button class="global_btn_red"><span class="icon-upvote"></span>upvote</button> <span class="bold">23 people</span> have upvoted this</li>
</ul>
</div>

我的页脚（部分调用）：

</section> <!-- Ending full width section -->
<div class="article_footer">
    <ul class="left">
        <li><button class="global_btn_red"><span class="icon-upvote"></span>upvote</button> <span class="bold">23 people</span> have upvoted this</li>
    </ul>
    <ul class="right">
      <li><button class="global_btn_white"><span class="icon-saved"></span> save for later</button></li>
      <li><a href="http://twitter.com/home?status={{ title }} https://thedigest.org/articles/{{ segment_3 }} - by @digestuk" target="blank" class="global_btn_white icon_btn_white"><span class="icon-twitter"></span></a></li>
      <li><a href="http://www.facebook.com/sharer.php?u=https://thedigest.org/articles/{{ segment_3 }}" class="global_btn_white icon_btn_white"><span class="icon-facebook"></span></a></li>
      <li><a href="mailto:support@thedigest.org" class="global_btn_white icon_btn_white"><span class="icon-flag"></span></a></li>
    </ul>
</div>

我的JS：

/**
* Article more dropdown
*/
$('.article_footer').show();

var entryheight = $('.article_footer_base').height();

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 350 && y < entryheight) {
         $('.article_footer').fadeOut();
    } else {
        $('.article_footer').fadeIn();
    }
});

Answer 1

TL; DR

将运行的jQuery如下：

/**
* Article more dropdown
*/
$('.article_footer').show();

var entryheight = $('.article_footer_base').offset().top;

$(document).scroll(function () {
    var y = $(window).scrollTop() + $(window).height();
    if (y > entryheight) {
         $('.article_footer').fadeOut();
    } else {
        $('.article_footer').fadeIn();
    }
});

TS; WM

（太短，想要更多）

首先，我们删除magic numbers。我不知道350代表什么，其他人也不知道。

然后，我们检查我们需要什么。在这种情况下，它是项目的offset。简而言之，偏移是项目距离顶部的距离。我们将它放在变量entryheight中，如上所示。现在，在滚动（$(document).scroll()）时，我们需要做的就是将窗口中的scrollTop()与项目的偏移量进行比较。如果y（窗口的滚动位置+窗口高度）大于entryheight，我们知道我们已通过.article_footer_base。否则，我们希望.article_footer可见。

在这里你可以看到它有效：http://jsfiddle.net/m7kjzbmv/4/

传递另一个div id时显示/隐藏div id

1 个答案:

TL; DR

TS; WM