javascript - 该 block 在首次加载时显示在上 block 的顶部，并在页面刷新时固定

Question

该 block 在首次加载时显示在顶部 block 的顶部，并在页面刷新时固定。在移动版网站中也是同样的情况。有时显示正确。该网站本身连接到 WordPress，并使用 Page Speed ninja 进行了优化。更改了Page Speed ninja的设置，仍然没有结果。我该如何解决这个问题？

Screen of a mobile version, when site's open

Screen of mobile version, after refreshing

该部分的 HTML 代码:

<section id="protfolio_sec">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs12">
                <div class="title_sec">
                    <h1>&nbsp</h1>
                    <h1><?php echo $redux['sportft'];?></h1>
                    <h2><?php echo $redux['sportfd'];?></h2>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="all-portfolios">
                    <div class="col-sm-6 col-lg-12 col-md-12 col-xs-12 ">
                        <div class="single-portfolio <?php echo $redux['sportf12'];?>" onclick="window.open('projects/project1')">
                            <div class="sngl_pricing">
                                <img class="img-responsive" src="<?php echo $redux['sportf1img']['url'];?>" height ="270" alt="">
                                <h3>
                                    <?php echo $redux['sportf1'];?>
                                    <p>
                                        <?php echo $redux['sportf11'];?>
                                    </p>
                                </h3>
                            </div>
                        </div>
                        <div class="single-portfolio <?php echo $redux['sportf22'];?>" onclick="window.open('projects/project2')">
                            <div class="sngl_pricing">
                                <img class="img-responsive" src="<?php echo $redux['sportf2img']['url'];?>" height ="270" alt="">
                                <h3>
                                    <?php echo $redux['sportf2'];?>
                                    <p>
                                        <?php echo $redux['sportf21'];?>
                                    </p>
                                </h3>
                            </div>
                        </div>
                        <div class="single-portfolio <?php echo $redux['sportf32'];?>" onclick="window.open('projects/project3')">
                            <div class="sngl_pricing">
                                <img class="img-responsive" src="<?php echo $redux['sportf3img']['url'];?>" height ="270" alt="">
                                <h3>
                                    <?php echo $redux['sportf3'];?>
                                    <p>
                                        <?php echo $redux['sportf31'];?>
                                    </p>
                                </h3>
                            </div>
                        </div>
                        <div class="single-portfolio <?php echo $redux['sportf42'];?>" onclick="window.open('projects/project4')">
                            <div class="sngl_pricing">
                                <img class="img-responsive" src="<?php echo $redux['sportf4img']['url'];?>" height ="270" alt="">
                                <h3>
                                    <?php echo $redux['sportf4'];?>
                                    <p>
                                        <?php echo $redux['sportf41'];?>
                                    </p>
                                </h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="all-portfolios">
                    <div class="col-sm-6 col-lg-12 col-md-12 col-xs-12 ">
                        <div class="single-portfolio <?php echo $redux['sportf52'];?>" onclick="window.open('projects/project5')">
                            <div class="sngl_pricing">
                                <img class="img-responsive" src="<?php echo $redux['sportf5img']['url'];?>" height ="270" alt="">
                                <h3>
                                    <?php echo $redux['sportf5'];?>
                                    <p>
                                        <?php echo $redux['sportf51'];?>
                                    </p>
                                </h3>
                            </div>
                        </div>
                        <div class="single-portfolio <?php echo $redux['sportf62'];?>" onclick="window.open('projects/project6')">
                            <div class="sngl_pricing">
                                <img class="img-responsive" src="<?php echo $redux['sportf6img']['url'];?>" height ="270" alt="">
                                <h3>
                                    <?php echo $redux['sportf6'];?>
                                    <p>
                                        <?php echo $redux['sportf61'];?>
                                    </p>
                                </h3>
                            </div>
                        </div>
                        <div class="single-portfolio <?php echo $redux['sportf72'];?>" onclick="window.open('projects/project7')">
                            <div class="sngl_pricing">
                                <img class="img-responsive" src="<?php echo $redux['sportf7img']['url'];?>" height ="270" alt="">
                                <h3>
                                    <?php echo $redux['sportf7'];?>
                                    <p>
                                        <?php echo $redux['sportf71'];?>
                                    </p>
                                </h3>
                            </div>
                        </div>
                        <div class="single-portfolio <?php echo $redux['sportf82'];?>" onclick="window.open('projects/project8')">
                            <div class="sngl_pricing">
                                <img class="img-responsive" src="<?php echo $redux['sportf8img']['url'];?>" height ="270" alt="">
                                <h3>
                                    <?php echo $redux['sportf8'];?>
                                    <p>
                                        <?php echo $redux['sportf81'];?>
                                    </p>
                                </h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="post_btn">
                    <div class="hover_effect_btn" id="hover_effect_btn">
                        <a href="projects/projects" data-hover="view more post"><span><?php echo $redux['sportfb'];?></span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>

CSS:

#protfolio_sec ul.filter {
    color : #2e2e2e;
}
#protfolio_sec ul.filter li {
    color : #666666;
    cursor : pointer;
    display : inline-block;
    font-family : Century Gothic;
    font-size : 14px;
    margin-right : 5px;
    padding : 15px 35px;
    position : relative;
}
#protfolio_sec ul.filter li:hover {
    color : #36BFF3;
}
#protfolio_sec ul.filter li.active {
    border-bottom : 1px solid #00AFF0;
}
#protfolio_sec .all-portfolios {
    margin-top : 20px;
    margin-left : -10px;
}
#protfolio_sec .single-portfolio {
    float : left;
    margin-bottom : 10px;
    width : 277px;
}
#protfolio_sec .single-portfolio:hover .img_hoverlay {
    display : block;
}

页脚后的JS代码

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/vendor/jquery-1.11.3.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/isotope.pkgd.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/bootstrap.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/appear.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/jquery.counterup.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/waypoints.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/owl.carousel.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/showHide.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/jquery.nicescroll.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/jquery.easing.min.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/scrolling-nav.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/plugins.js"></script>
<script src="<?php bloginfo('template_directory');?>/js/main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

然后:

<script type="text/javascript">
    $(document).ready(function() {
        $('.show_hide').showHide( {
            speed: 1000,
            easing: '',
            changeText: 1,
            showText: 'View',
            hideText: 'Close'
        }); 
    });
</script>

<script>
    jQuery(document).ready(function( $ ) {
        $('.counter').counterUp({
            delay: 10,
            time: 1000
        });
    });
</script>

<script>
    //Hide Overflow of Body on DOM Ready //
    $(document).ready(function(){
        $("body").css("overflow", "hidden");
    });

    // Show Overflow of Body when Everything has Loaded 
    $(window).load(function(){
        $("body").css("overflow", "visible");        
        var nice=$('html').niceScroll({
            cursorborder:"5",
            cursorcolor:"#00AFF0",
            cursorwidth:"3px",
            boxzoom:true, 
            autohidemode:true
        });
    });
</script>

Answer 1

这可能与滚动/缓动 jquery 有关。消除测试中的每个 jquery(不是 jquery.min.js)，而是个性化的 jquery，并测试它在第一次加载期间是否重叠。

还可以通过一次性消除所有个性化 jquery(nicescroll、easing、scrolling-nav)进行测试，并通过将它们一一添加回来来测试发生的情况。我认为，它在卷轴的计时结束时停止了。

----->只是为了更好的实践

尝试不使用空格作为填充，如下所示:

<h1>&nbsp</h1>

而是在 css 中创建样式

.pb_1 {
    padding-bottom: 1em; // e.g.
}

.pb_2 {
    padding-bottom: 2em;  // if you want more space
}

在你的 html 文件上

<div class="title_sec  pb_1">  <!--  add your padding styles here  -->
<!-- eliminate this part  <h1>&nbsp</h1>  -->