html - 滚动时如何从固定顶部的 Bootstrap 标题中隐藏图像

Question

我正在使用 Laravel 和 Bootstrap 在一个元素博客中工作，我需要在滚动后隐藏菜单的图像，但问题是如果我更改图像的位置，所有站点都会损坏，顶部菜单必须始终可见，但顶部图像不必如此。

现在是这样显示的

滚动后应该是怎样的

我尝试了很多不同的 jquery 方法，都没有用

这是我的网站直播http://soygarota.com/blog/public

这是我的导航代码

<div class="navbar navbar-fixed-top navbar-inverse text-center sin-bordes OpenSansExtraBold" role="navigation" id="nav">
    <div class="masthead hidden-xs">
        <img src="{{ asset('images/layout/header.JPG') }}" class="img-responsive logo-header-img"/>
        <img src="{{ asset('images/layout/header1.png') }}" class="img-responsive img-header-desktop"/>
    </div>
    <div class="container-fluid text-center nav-height">

        <div class="navbar-header text-center">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{{route('front.index')}}">
                <img src="{{ asset('images/layout/header-mobile.png') }}" alt="Carolina Silva" class="img-responsive hidden-sm hidden-md hidden-lg img-header-logo">
            </a>
        </div>

        <div class="collapse navbar-collapse text-center
">
            <ul class="nav navbar-nav text-center">
                <li><a href="{{ Route('front.index') }}" class="HeaderLink">HOME</a></li>
                <li><a href="{{route('front.search.category', 'INSPIRATION')}}" class="HeaderLink">INSPIRATION</a></li>
                <li><a href="{{route('front.search.category', 'LIFESTYLE')}}" class="HeaderLink">LIFESTYLE</a></li>
                <li><a href="{{route('front.search.category', 'FASHION')}}" class="HeaderLink">FASHION</a></li>
                <li><a href="{{ route('front.about') }}" class="HeaderLink">ABOUT</a></li>
                <li><a href="{{ route('front.contact') }}" class="HeaderLink">CONTACT</a></li>
            </ul>

            <div class="col-sm-3 col-md-3 pull-right">
                {!! Form::open(['route' => 'front.index', 'method' => 'GET', 'class' => 'navbar-form','role' => 'search']) !!}
                <div class="input-group">
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit" id="SearchInput"><i class="glyphicon glyphicon-search" id="SearchIcon"></i></button>
                    </div>
                    <input type="text" class="form-control" placeholder="SEARCH" name="srch_term" id="srch_term">
                </div>
                {!! Form::close() !!}
            </div>


        </div><!--/.nav-collapse -->


    </div>
</div>

问题是如何在不破坏设计的情况下使滚动条隐藏图像？

Answer 1

试试这个片段:

<script>
    $(document).ready(function() {
        $(window).scroll(function() {
            if ($("body").height() <= ($(window).height() + $(window).scrollTop()) || $(window).scrollTop() <= 50) {
                $(".masthead").show();
            }else {
                $(".masthead").hide();
            }
        });
    });
</script>

将变量值设置为您希望它隐藏的位置。 希望对您有所帮助:)