Question

我有一个关于屏幕中间的菜单。它包含一些下拉菜单列表，当用户滚动到某个点时，它会粘在页面顶部。

<div class="discover_filter ">
    <div class="filter1">
        <p class="menuitem">Type</p>
        <ul>
            <li>Option</li>
        </ul>
    </div>
    <div class="filter1">
        <p class="menuitem">Location</p>
        <ul>
            <li>Option</li>
        </ul>
    </div>
    <div class="filter1">
        <p class="menuitem">Industry</p>
        <ul>
            <li>Option</li>
        </ul>
    </div>
    <div class="filter1">
        <p class="menuitem">Featured</p>
        <ul>
            <li>Option</li>
        </ul>
    </div>
</div>

CSS：

.discover_filter {
  width: 980px%;
  height: 50px;
  background-color: #ea8f18;
  padding: 0 40px;
}

.stick {
  position: fixed;
  top: 103px;
  z-index: 9999;
  width:980px;
}

.filter1 {
  float: left;

  z-index:9999;
  cursor: pointer;  
  height:50px;
  background-color:#ea8f18;
  width: 170px;
  color: white;
  overflow: hidden;

  .menuitem {
    font-weight: bold;
    display:block;
    height:20px; width: 150px; 
    padding: 15px 10px;
    font-size: 15pt;

  }

和Javascript：

$('.filter1').hover(function() {
        $(this).animate({ 'height': '400px' }, 250);
    }, function() {
        $(this).animate({ 'height': '50px' }, 250);
    });

    var s = $(".discover_filter");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();

        if (windowpos >= 400) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });

问题是，菜单按下它下面的页面，除非菜单已正确固定到页面顶部（一旦用户滚动得足够远）。

如何在不按下页面的情况下正确覆盖菜单？

Answer 1

我找到了你。我可以建议你一些不同的东西。我在某个地方做过。

JS

$(document).on("scroll", function () {
            if ($(document).scrollTop() > "700") {
                $(".nav_class").css({ "position": "relative" });
            }
            else {
                $(".nav_class").css({ "position": "fixed"});
            }
        });

700 =是您希望在屏幕顶部修复它时可以更改的值。

或制作两个班级

CSS

.class_a
{
position:relative;
}

.class_b
{
position:fixed;
top:0; /*to fix it on top*/
}

JS

$(document).on("scroll", function () {
                if ($(document).scrollTop() > "700") {
                    $(".nav_class").removeClass('class_a');
                }
                else {
                    $(".nav_class").addClass('class_b');
                }
            });

下拉菜单 - 固定属性

1 个答案: