jquery - 如何切换使用滚动(功能)的元素？

Question

我有一个元素设置为当用户在浏览器窗口中向下滚动时消失。我还希望该元素在单击另一个元素时切换其可见性。

这是我所拥有的，但可见/不可见切换不起作用:

jQuery(document).ready(function() {
    $(window).scroll(function() {
        $(".product-down-scroll").css("opacity", 1 - $(window).scrollTop() / 250);
    });

    $('.pricing-tab').click(function() {
        $('.product-down-scroll').toggle();
    });
});

html:

<div class="pricing-accordion">
    <div class="pricing-tab">
        <input id="tab" type="checkbox" name="tabs">
        <label for="tab">PRICING</label>
        <div class="tab-content">
            <p>Lorem ipsum dolor si amet</p>
        </div>
    </div>
</div>

如何实现这一目标？

Answer 1

代码

$('.pricing-tab').click(function(){
  $('.product-down-scroll').toggle();
});  

绑定(bind)click元素事件<div class="pricing-tab"></div> 。从那以后<div>没有任何内容，它有一个 height的0并且无法点击。

Here is a fiddle建议使用<button>元素来切换 <div class="pricing-tab"></div>元素。