Раскрывающееся меню - Фиксированные свойства

Question

Раскрывающееся меню - Фиксированные свойства

0

У меня есть меню на полпути вниз по экрану. Он содержит списки выпадающих меню, а когда пользователь прокручивается мимо определенной точки, он придерживается верхней части страницы.

<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"); 
        }
    });

Проблема в том, что меню выталкивают страницу ниже, за исключением случаев, когда меню было правильно зафиксировано в верхней части страницы (как только пользователь прокрутил достаточно далеко).

Как я могу правильно наложить меню, не нажимая страницу вниз?

opticon 19 окт. 2013, в 11:50

Источник

Теги:

javascript

html

css

1 ответ

Ещё вопросы

user2021917 · Answer 1 · 2013-10-19T06-34-00.000Z

Понял тебя. Я могу предложить вам что-то другое. Я сделал это где-то.

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');
                }
            });