I’m using blogspot.com system to create my own blog.
the problem is that the sticky navigation bar causes a small jump on the page while scrolling!
this is the website if you want to understand clearly : https://www.wave4tech.net/
Also why the sticky nav is not appearing in mobile version of my site? these are my codes :
JQuery:
<script>
//<![CDATA[
$(function(){"use strict";var minimumWidth;if(Modernizr.mq('(min-width: 0px)')){minimumWidth=function(width){return Modernizr.mq('(min-width: '+width+'px)');}}else{minWidth=function(width){return $window.width()>=width;}}
$(window).scroll(function(){var scroll=$(window).scrollTop();if(scroll>300&minimumWidth(1200)){$(".fbt_sticky_nav").addClass("sticky__nav");}else{$(".fbt_sticky_nav").removeClass("sticky__nav");}
if(scroll>400&minimumWidth(1200)){$(".fbt_sticky_nav").addClass("nav_offset");}else{$(".fbt_sticky_nav").removeClass("nav_offset");}
if(scroll>500&minimumWidth(1200)){$(".fbt_sticky_nav").addClass("scrolling_nav");}else{$(".fbt_sticky_nav").removeClass("scrolling_nav");}});$('.post-body').each(function(){$(this).find('iframe[src*="youtube.com"]').removeAttr('width').removeAttr('height').removeAttr('data-thumbnail-src').removeAttr('frameborder').removeClass('YOUTUBE-iframe-video');$(this).find('iframe[src*="youtube.com"], iframe[src*="player.vimeo.com"], iframe[src*="facebook.com/plugins/video"]').addClass('embed-responsive-item').wrap('<div class="embed-responsive embed-responsive-16by9"></div>');});$('.item-view .post-body img').first().each(function(){$(this).parent().parent().remove();});$("#navbar.navbar-collapse").each(function(){$(this).find('#LinkList1 ul li').css('cssText','display: block');$(this).find(".navbar-nav li").addClass("nav-item");$(this).find(".navbar-nav li a").addClass("nav-link");$(this).find(".dropdown-menu").parent("li").addClass("dropdown");$(this).find(".dropdown-menu a").removeClass("nav-link").addClass("dropdown-item").unwrap();$(this).find(".dropdown ul").replaceWith(function(){return"<div class='dropdown-menu'>"+this.innerHTML+"</div>";});$(this).find(".dropdown .nav-link").addClass("dropdown-toggle").attr("aria-haspopup","true").attr("aria-expanded","false").attr("data-toggle","dropdown");$(this).find(".navbar-nav").unwrap();});$('.carousel-inner .carousel-item:first-child').addClass('active');});(function($){"use strict";SearchFormInit();function SearchFormInit(){$(".search-trigger").on('click',function(){$("#search").addClass("active").find(".search").focus();});$("#search").on('click',function(){$(this).find(".search").focus();});$("#close").on('click',function(){$("#search").removeClass("active");});}
$().UItoTop({easingType:'easeOutQuart'});$('.lazyloaded').lazy();})(jQuery);if($('.archive-view .queryMessage .card, .label-view .queryMessage .card').hasClass('fbt-query-error-mode')){$('#blog-pager').addClass('d-none');};function openNav(){var el=document.getElementById("sidebar-wrapper"),$contentOverlay=document.getElementById("fbt-content-overlay"),bodyClass=document.querySelector('body');el.classList.add("openSidebar");$contentOverlay.classList.add("activeOverlay");el.classList.remove("closeSidebar");bodyClass.classList.add("sidebar-visible");};function closeNav(){var el=document.getElementById("sidebar-wrapper"),$contentOverlay=document.getElementById("fbt-content-overlay"),bodyClass=document.querySelector('body');el.classList.remove("openSidebar");$contentOverlay.classList.remove("activeOverlay");bodyClass.classList.remove("sidebar-visible");};var ppCarousel=$(".carousel");ppCarousel.append("<ol class='carousel-indicators'></ol>");var indicators=$(".carousel-indicators");ppCarousel.find(".carousel-inner").children(".carousel-item").each(function(index){(index===0)?indicators.append("<li data-target='#carouselPopularPosts' data-slide-to='"+index+"' class='active'></li>"):indicators.append("<li data-target='#carouselPopularPosts' data-slide-to='"+index+"'></li>");});$('.fbt-sidenav').each(function(){var searchWidth=$('.sidebar-wrapper').width();if(searchWidth>0){$('.fbt-sidenav').addClass('active');}else{$('.fbt-sidenav').removeClass('active');}});$(function($){"use strict";var c_form="[contact_Form]";var hide_text="[hide_Text]";var full_page="[full_Page]";var primary_button="[button_primary]";var secondary_button="[button_secondary]";var success_button="[button_success]";var danger_button="[button_danger]";var warning_button="[button_warning]";var info_button="[button_info]";var dark_button="[button_dark]";var grid_five="[full_Screen]";var grid_four="[four_Columns]";var hide_author="[hide_Author]";var hide_date="[hide_Date]";var hide_post_meta="[hide_PostMeta]";$(".post-body *").replaceText(primary_button,"<span class='post-button-primary d-none'></span>");$(".post-body *").replaceText(secondary_button,"<span class='post-button-secondary d-none'></span>");$(".post-body *").replaceText(success_button,"<span class='post-button-success d-none'></span>");$(".post-body *").replaceText(danger_button,"<span class='post-button-danger d-none'></span>");$(".post-body *").replaceText(warning_button,"<span class='post-button-warning d-none'></span>");$(".post-body *").replaceText(info_button,"<span class='post-button-info d-none'></span>");$(".post-body *").replaceText(dark_button,"<span class='post-button-dark d-none'></span>");$(".post-button-primary").parent().wrapInner('<button class="btn btn-primary" type="button"></button>');$(".post-button-secondary").parent().wrapInner('<button class="btn btn-secondary" type="button"></button>');$(".post-button-success").parent().wrapInner('<button class="btn btn-success" type="button"></button>');$(".post-button-danger").parent().wrapInner('<button class="btn btn-danger" type="button"></button>');$(".post-button-warning").parent().wrapInner('<button class="btn btn-warning" type="button"></button>');$(".post-button-info").parent().wrapInner('<button class="btn btn-info" type="button"></button>');$(".post-button-dark").parent().wrapInner('<button class="btn btn-dark" type="button"></button>');$(".fbt-item-post *").replaceText(full_page,"<style>.blog-posts .col-xl-8.col-lg-9 {-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;}.fbt-page-shape-title {text-align: center;}</style>");$(".fbt-item-post *").replaceText(c_form,"<div class='page-contact'/><style>#page_widgets .ContactForm,.sidebar .ContactForm,.ContactForm .fbt-sep-title {display: none!important;}</style>");$("#Short_Code_Options .html-widget-content").replaceText(grid_five,"<style>.feed-view .fbt-elastic-container {max-width: 100%;}@media (min-width: 1200px) {.card-columns {-webkit-column-count: 5;-moz-column-count: 5;column-count: 5;}}.navbar {padding-left: 0;padding-right: 0;}@media (min-width: 768px) {.navbar {padding-left: 1.9rem;padding-right: 1.9rem;}}.navbar .container {max-width: 100%;}@media (max-width: 575.98px) {.navbar {padding-left: 1rem;padding-right: 1rem;}}.blog-post:nth-child(2n+2) .card-body .post-excerpt {display: none;}@media (max-width: 1601.98px) {.fbt-index-post .post-title.h4 {font-size: 1rem;line-height: calc(1rem + 4px);}}@media (min-width: 768px) {.feed-view .fbt-elastic-container {padding: 0 3rem;}}</style>");$("#Short_Code_Options .html-widget-content").replaceText(hide_author,"<style>#carouselPopularPosts .post-meta .post-author, .FeaturedPost .post-meta .post-author {display: none;}</style>");$("#Short_Code_Options .html-widget-content").replaceText(hide_date,"<style>#carouselPopularPosts .post-meta .post-date, .FeaturedPost .post-meta .post-date, .post-meta span:not(:last-child):after {display: none;}</style>");$("#Short_Code_Options .html-widget-content").replaceText(hide_post_meta,"<style>#carouselPopularPosts .post-meta, .FeaturedPost .post-meta {display: none;}.fbt_read_more {margin-top: 2.5rem!important;}</style>");$("#Short_Code_Options .html-widget-content").replaceText(grid_four,"<style>@media (min-width: 1200px) {.card-columns {-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;}}.fbt-index-post .post-title.h4 {font-size: 1rem;line-height: calc(1rem + 4px);}.blog-post:nth-child(2n+2) .card-body .post-excerpt {display: none;}</style>");$(".fbt-item-post *").replaceText(hide_text,"<div class='hidden-text d-none'></div>");$('strike').appendTo('.hidden-text');$('#page_widgets .ContactForm').appendTo('.page-contact');$(".fbt-big-title-text").each(function(){var n="[";var r="]";$(".fbt-big-title-text *").replaceText(n,'<span class="title-sec-text">');$(".fbt-big-title-text *").replaceText(r,"</span>");});$(".post-body").each(function(){$(this).find('blockquote').addClass('fbt-shape-container').wrapInner('<div class="card shadow-lg radius-10 px-5 pt-5 pb-4"><p class="pl-5"/></div>');});$('.Blog, .navbar-brand, .header-buttons').show();$('.cookie-choices-button').addClass('btn btn-warning btn-sm text-dark py-1 px-4 radius-25 font-weight-light');});if(document.documentMode||/Edge/.test(navigator.userAgent)){jQuery('.fbt-post-thumbnail a img, .PopularPosts a img').addClass('d-none').each(function(){var t=jQuery(this),s='url('+t.attr('data-src')+')',p=t.parent(),d=jQuery('<div class="fbt-resize"></div>');p.append(d);d.css({'background-image':s});t.hide();});}
//]]>
</script>CSS:
.fbt_sticky_nav.nav_offset {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.fbt_sticky_nav.sticky__nav {
position: fixed;
visibility: hidden;
opacity: 0;
top: 0;
left: 0;
right: 0;
z-index: 1030;
}
.fbt_sticky_nav.sticky__nav.scrolling_nav {
opacity: 1;
visibility: visible;
}
.fbt_sticky_nav.scrolling_nav {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
@media (min-width: 1200px) {
.fbt_sticky_nav.scrolling_nav .nav-item .nav-link {
padding-top: 1.25rem;
padding-bottom: 1.2rem;
}
}
.dark-skin {
background-color: $(header.bg.color);
-webkit-box-shadow: 0 0 $(shadow.width) rgba(103,151,255,.25);
box-shadow: 0 0 $(shadow.width) rgba(103,151,255,.25);
}HTML (If necessary):
<nav class='navbar navbar-expand-xl navbar-dark dark-skin fbt_sticky_nav'>
<div class='container nav-mobile-px clearfix'>
<b:section class='navbar-brand order-2 order-xl-1 m-auto' id='header-logo' maxwidgets='1' name='Logo' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Wave4Tech - الموجة للتقنية (Header)' type='Header' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>http://2.bp.blogspot.com/-dN1zT-u4E-g/YL02ix5vWFI/AAAAAAAAI4o/U32cwNmYTbg7mscXxZUN3qVdA1k175XsQCK4BGAYYCw/s305/Logo%2B2%2BEn.png</b:widget-setting>
<b:widget-setting name='displayHeight'>56</b:widget-setting>
<b:widget-setting name='sectionWidth'>305</b:widget-setting>
<b:widget-setting name='useImage'>true</b:widget-setting>
<b:widget-setting name='shrinkToFit'>true</b:widget-setting>
<b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
<b:widget-setting name='displayWidth'>300</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<div class='header-widget'>
<b:include cond='data:imagePlacement in {"REPLACE", "BEFORE_DESCRIPTION"}' name='image'/>
<b:include cond='data:imagePlacement == "BEHIND"' name='title'/>
</div>
</b:includable>
<b:includable id='behindImageStyle'>
<b:if cond='data:sourceUrl'>
<b:include cond='data:this.image' data='{ image: data:this.image, selector: ".header-widget" }' name='responsiveImageStyle'/>
<style type='text/css'>
.header-widget {
background-position: <data:blog.locale.languageAlignment/>;
background-repeat: no-repeat;
}
</style>
</b:if>
</b:includable>
<b:includable id='description'>
<p>
<data:this.description/>
</p>
</b:includable>
<b:includable id='image'>
<a class='header-image-wrapper' expr:href='data:blog.homepageUrl'>
<img expr:alt='data:blog.title.escaped' expr:data-height='data:height' expr:data-width='data:width' expr:src='data:image resizeImage 240'/>
</a>
</b:includable>
<b:includable id='title'>
<h1>
<b:tag expr:href='data:blog.homepageUrl' name='a'>
<data:title/>
</b:tag>
</h1>
</b:includable>
</b:widget>
</b:section>
<button aria-controls='navbar' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler order-1 order-xl-2' data-target='#navbar' data-toggle='collapse' type='button'>☰</button>
<div class='header-buttons order-3 order-lg-4'>
<span class='fa fa-search navbar-search search-trigger'/>
<span class='fbt-sidenav ml-1' onclick='openNav()'>☰</span>
</div>
<b:section class='collapse navbar-collapse order-4 order-xl-3 clearfix' id='navbar' maxwidgets='1' name='Main Menu' showaddelement='yes'>
<b:widget id='LinkList1' locked='true' title='Main Menu' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='link-7'>https://wave4technology.blogspot.com/search/label/Windows?max-results=16</b:widget-setting>
<b:widget-setting name='link-5'>https://wave4technology.blogspot.com/search/label/PC%20Softwares?max-results=16</b:widget-setting>
<b:widget-setting name='link-6'>https://wave4technology.blogspot.com/search/label/Android%20Apps?max-results=16</b:widget-setting>
<b:widget-setting name='link-3'>https://wave4technology.blogspot.com/search/label/Android%20Games?max-results=16</b:widget-setting>
<b:widget-setting name='link-4'>#</b:widget-setting>
<b:widget-setting name='text-1'>{ Games }</b:widget-setting>
<b:widget-setting name='text-0'>{ Homepage }</b:widget-setting>
<b:widget-setting name='text-3'>_Android Games</b:widget-setting>
<b:widget-setting name='text-2'>_PC Games</b:widget-setting>
<b:widget-setting name='text-5'>_PC Softwares</b:widget-setting>
<b:widget-setting name='text-4'>{ Softwares }</b:widget-setting>
<b:widget-setting name='text-7'>{ Windows }</b:widget-setting>
<b:widget-setting name='text-6'>_Android Apps</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='link-1'>#</b:widget-setting>
<b:widget-setting name='link-2'>https://wave4technology.blogspot.com/search/label/PC%20Games?max-results=16</b:widget-setting>
<b:widget-setting name='link-0'>/</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
<script>what can i do to prevent this bug from appearing ?
i want a stable scrolling man.. i also tried to change the position to relative and to stick but none of them solved my issue.
(SORRY FOR MY BAD EXPLANATION & BAD ENGLISH)
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
The issue causing a sudden jump when scrolling is in your css. Specifically this part.
.fbt_sticky_nav.sticky__nav {
position: fixed;
visibility: hidden;
opacity: 0;
top: 0;
left: 0;
right: 0;
z-index: 1030;
}
.fbt_sticky_nav.sticky__nav.scrolling_nav {
opacity: 1;
visibility: visible;
}
To see what’s happening, in the first block .fbt_sticky_nav.sticky__nav try setting the opacity to 1 and visibility to visible and scrolling up and down the page.
opacity: 1;
visibility: visible;
When you do that you’ll see that when you start scrolling from the top of the page, the nav bar is hidden. Then when you get a little ways down, the nav bar suddenly pops into view. Then, as you keep scrolling, the nav bar slides up out of view. Then as you scroll just a little further, the nav bar slides back down into view again.
The thing about the properties visibility and opacity is that they don’t actually remove the element from the dom. It’s just hidden from view. So in your case, you have this fixed position element that suddenly pops into view but still remains unseen.
If you want something to be removed from the dom entirely, use display: none. When you want to show it again, use display: block
.fbt_sticky_nav.sticky__nav {
position: fixed;
display: none;
opacity: 0;
top: 0;
left: 0;
right: 0;
z-index: 1030;
}
.fbt_sticky_nav.sticky__nav.scrolling_nav {
opacity: 1;
display: block;
}
Note that this does break the little slide down animation when scrolling. The nav just suddenly appears without any transition. But it stops the sudden jump that happens when scrolling.
There is a larger issue at hand and it will require some more investigation on your part. Applying the fix above really only treats the symptoms of the problem. It doesn’t cure it.
I haven’t really got the bandwidth to dive much further into this but, I’d take a look at the jQuery code and double check your logic.
The relevant part looks to be:
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if ((scroll > 300) & minimumWidth(1200)) {
$(".fbt_sticky_nav").addClass("sticky__nav");
} else {
$(".fbt_sticky_nav").removeClass("sticky__nav");
}
if ((scroll > 400) & minimumWidth(1200)) {
$(".fbt_sticky_nav").addClass("nav_offset");
} else {
$(".fbt_sticky_nav").removeClass("nav_offset");
}
if ((scroll > 500) & minimumWidth(1200)) {
$(".fbt_sticky_nav").addClass("scrolling_nav");
} else {
$(".fbt_sticky_nav").removeClass("scrolling_nav");
}
});
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0