Choppy scrolling from top of page

When you scroll down the page, there is a glitch that makes the page “jump” instead of smoothly scrolling from the top. How can I remove this “choppy” scrolling from the top of the page?

Hello there,

I am sorry to hear the issue you are experiencing.

Could you confirm if you have been running the latest version of Sydney Pro?

Regards,
Kharis

I am running version 1.38. You can notice it clearly on this page: http://www.kaytellehoel.com/vep/shop/
I’m running Windows 10, Chrome.

Hello there,

I am wondering if it relates with the hardware performance issue. Could you please compare your site to our demo http://demo.athemes.com/sydney-pro/? Let me know if the issue also to happen.

Regards,
Kharis

Actually, I now understand why you don’t see if.

Screenshot for guest: http://imgur.com/qOnfYSq The spacing on the top is wrong, but there is no scrolling issue.
Screenshot for admin: http://imgur.com/ntaw2Wt The spacing on the top is correct, but there a scrolling issue.

Hello there,

Could you please give me a temporary access to your site admin area? I would like to inspect the issue directly from there. Please send the login credentials to my email at kharisblank @gmail dotcom. Enclose the link to this thread.

Regards,
Kharis

I had this same problem and did not have a resolve provided. On a brand new mac.

Hello, I have the same issue, even I use free Sydney. Anyone knows what is happening there?

Hello @sourire09,

Could you please share your site’s URL here, so I can have a closer look?

Regards,
Kharis

I got rid of it - the point was that I had installed plugin for smooth scrolling and it didn’t work well with original scrolling in Sydney. I uninstalled that plugin and everything is ok. :slight_smile:

Hello @sourire09,

Thank you for updating me. I am glad to know that you have been able to resolve it by yourself.

Have a nice day/night. :slight_smile:

Regards,
Kharis

Although I have given support login credentials to investigate this case, they claim that the login does not work and have yet to resolve my issue unfortunately.

Resolved over email support. For anyone might be curious, apply the following CSS code to fix the issue.


.site-header.fixed {
  position: relative !important;
} 

Hi @Kharis

I have the same problem wrt to scrolling. I’d just like to know where I should insert the CSS snippet on my page:

.site-header.fixed {
position: relative !important;
}

Where should I put this code?

Hello @richardsit,

You can use Simple Custom CSS plugin.

Regards,
Kharis

Hi Kharis,

I too have this choppy scrolling going on. I have tried the fix shown above but it actually made things worse. I have previously been given the code;

/* Keep the site header sticky */
.site-header.fixed {
position: fixed !important;
}

this helped a bit but if you view my site and scroll down the page the logo bounces before it shrinks and becomes sticky. When you scroll back up the page the same thing happens again. I have tried this on a couple of PC’s and different browsers and they do the same thing.

My site is at; http://www.1design.ltd

My Child CSS is currently;

/*
Theme Name: Sydney Pro Child
Theme URI: https://athemes.com/theme/sydney
Author: aThemes
Author URI: https://athemes.com
Template: sydney-pro-ii
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sydney
*/

/* Keep the site header sticky */
.site-header.fixed {
position: fixed !important;
}

/* Site Header logo shrink when scrolled */
#masthead.float-header .site-logo {
max-height: 80px;
transition: 0.5s;
margin-bottom: 0;
}

/* Site Header make the header area slightly transparent on scroll */
.site-header.float-header {
background-color: rgba(0,0,0,0.7) !important;
}

/* Styling for Content Box on Testimonials */
.roll-testimonials .whisper {
font-size: 18px;
font-style: italic;
line-height: 26px;
margin: 0;
border: 0;
background-color: transparent;
color: black;
font-weight: 500;
}

/* Styling for Page Title */
.hentry .title-post {
font-size: 38px;
color: #fa7c00;
}

/* Styling for Preloader */
.preloader .pre-bounce1, .preloader .pre-bounce2 {
display: none;
}
.preloader .spinner {
background-image: url(‘http://1design.ltd/wp-content/uploads/2016/08/preloader1.gif’);
width: 64px;
height: 64px;
background-repeat: no-repeat;
background-size: contain;
}

/* Styling for Employee email icon */
.team-social .fa-google-plus:before {
content: ‘\f0e0’;
}

/* Styling for 3 Columns on Project Columns */
@media only screen and (min-width: 991px) {
.roll-project.fullwidth .project-item {
width: 33.333333%
}
}

/* Styling for Mobile Menu button */
.btn-menu {
color: #fa7c00;
}

Many thanks for your help on this,
Kind Regards,

Rich.

Dear Risch,

To resolve it, please try to add the following CSS code:


.header-contact{
  position: relative;
  z-index: 13;
}

.site-header{
  margin-top: 0;
  padding-top: 70px !important;
}

.site-header.fixed {
  margin-top: 0;
  padding: 70px 0 5px 0 !important;
  z-index: 12;
}

.site-header.fixed.float-header{
  padding-top: 5px !important;  
}  

@media only screen and (max-width:1024px){
  
  .site-header{
    max-height: 130px; 
  }  
  
}

@media only screen and (max-width:991px){
  
  .site-header{
    max-height: 248px; 
  }  
  
  .site-header.fixed.float-header{
    max-height: 130px;   
  }    
  
}

Regards,
Kharis

Hi Kharis,

Thanks for sending on this code, I have tried 2 things;

  1. I used ONLY your CSS above in my child style.css and tried that - MADE NO DIFFERENCE. The logo still bounces on a scroll down and up.

  2. I Inserted your CSS code at the top of my child style.css and tried that - MADE NO DIFFERENCE. The logo still bounces on a scroll down and up.

I have cleared the browser cache and re-freshed the pages just to check and the code seems to make no difference at all.

Kind Regards,
Rich.

Dear Rich,

Thank you for the followup. I am looking into it again. I will update you ASAP.

Regards,
Kharis

Thank you Kharis.

Regards,
Rich.