Question

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

<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，因此内容会更接近侧边栏导航。尝试一下，看看你是否喜欢它的外观。

Answer 2

在main.css中搜索此内容并进行此更改并尝试。

@media handheld, only screen and (min-width: 767px) {
    .nav_cnt{
        position: relative;

    }
    .fixed{
        margin-bottom: 50px;
        position:fixed;
        top:50px;
        width:26.65%;
    }
}

固定元素宽度变化

2 个答案: