css - 固定元素宽度变化

Question

在滚动到该元素时添加固定类后，侧边栏中的导航会更改宽度。根据屏幕宽度，它会发生显着变化。

http://festiva.com/fac.php

<div class="col-sm-4 nav_cnt">
    <ul class="nav">
        <li><a href="destinations2.php">Overview </a></li>
        <li><a class="current"href="fac.php">Festiva Adventure Club <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a></li>
        <li><a href="#">Festiva Weeks</a></li>
        <li><a href="#">Festiva Exchange Partners</a></li>
        <li><a href="#">Voyages by RTX</a></li>
        <li><a href="#">Festiva Sailing Vacations</a></li>
        </ul>
    </div>

@media handheld, only screen and (min-width: 767px) {
    .nav_cnt{
        position: relative;
    }
    .fixed{
        margin-bottom: 50px;
        position:fixed;
        top:50px;
        width: inherit;
        width: 25%;
    }
}

$(window).bind('scroll', function() {
        if($(window).scrollTop() >= $('.nav_cnt').offset().top - 50 ) {
            $('.nav_cnt').find('.nav').addClass('fixed');
        }else{
            $('.nav_cnt').find('.nav').removeClass('fixed');
        }
    });

Answer 1

我会为这个侧边栏导航找到一个合适的宽度，并在移动之前给它一个明确的设置宽度。这样你就知道它会保持一致并且根本不会改变宽度。 280px 对我来说似乎不错，因为我正在测试，我将 .nav_cnt 设置为 col-xs-12 col-sm-4 col-md-3 col -lg-3 而是让内容更靠近侧边栏导航。试试看，看看您是否喜欢它的外观。