Блок отображается в верхней части верхнего блока при первой загрузке и фиксируется при обновлении страницы. - PullRequest
1 голос
/ 19 апреля 2019

Блок отображается в верхней части верхнего блока при первой загрузке и фиксируется при обновлении страницы. В мобильной версии сайта такая же ситуация. Иногда отображается правильно. Сам сайт подключен к WordPress, оптимизирован с помощью ниндзя Page Speed. Изменены настройки ниндзя Page Speed, пока безрезультатно. Как я могу это исправить?

Экран мобильной версии, когда сайт открыт

Экран мобильной версии, после обновления

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...