WoHe Posted June 29, 2017 Share Posted June 29, 2017 (edited) I have created some js file to change the height of my header when a user scrolls through it. The goal is that the header starts at 90% of the window height (90vh in css) when the page is loaded and it shrinks down to 80px when a user starts scrolling down (if the user goes back to the top of the page it will again grow to 90%). Also I want a gif playing in the back behind the header. The code works, but when you scroll down/up it seems to be lagging, but I would like it to fluently do these actions. Can anyone can give me some hints on how to improve the speed? Here is my code for these actions: HTML <html> <body> <div id="header-back" class="col12"></div> <div id="header" class="col12"></div> <div id="main" class="col12"></div> </body> </html> CSS /****** GRID VIEW ******/ [class*="col"] { width: 100%; } @media only screen and (min-width: 850px) { .col1 {width: 8.33%;} .col2 {width: 16.67%;} .col3 {width: 25.00%;} .col4 {width: 33.33%;} .col5 {width: 41.67%;} .col6 {width: 50.00%;} .col7 {width: 58.33%;} .col8 {width: 66.67%;} .col9 {width: 75.00%;} .col10 {width: 83.33%;} .col11 {width: 91.67%;} .col12 {width: 100.00%;} .col {width: auto;} } * { font-family: Trebuchet MS; border: 0px solid black; box-sizing: border-box; } body { width: 100vw; min-height: 100vh; margin: 0; } /* HEADER */ #header { height: 90vh; min-height: 80px; max-height: 90vh; background-color: rgba(30,30,30,0.8); position: fixed; top: 0; left: 0; box-shadow: 0 0 15px rgb(0,0,0); z-index: 2; } #header-back { height: 90vh; min-height: 80px; max-height: 90vh; position: fixed; top: 0; left: 0; z-index: 1; background-image: url("https://media.giphy.com/media/wyBcwFyH2FpO8/giphy.gif"); background-position: bottom left; background-size: cover; } /* MAIN */ #main { min-height: 100vh; padding-top: 90vh; background-color: rgb(230,230,230); } Javascript // change header size on scroll $(document).ready(function(){ // variables var vh90 = $(window).height()*(9/10); var height, color, opacity; // control height of header on scroll $(window).scroll(function(){ height = vh90 - $(window).scrollTop(); opacity = 1 - ( (height-80) / vh90 ) * 0.2; color = "rgba(30,30,30," + opacity + ")"; $("#header").css({"height": height, "background-color": color}); $("#header-back").css({"height": height}); }); }); I have created a jsfiddle to show my idea, but in the fiddle it seems to be working fluently (I used another gif, but I don't think this is the problem because this gif gets loaded at the start and doesn't really go away?) Edited June 29, 2017 by WoHe Link to comment Share on other sites More sharing options...
Ingolme Posted June 29, 2017 Share Posted June 29, 2017 If the code is running slowly in a different environment then we're going to have to see the code operating in that environment. I can give suggestions to optimize your code, but the main issue is probably with something else on the page which we have no information about. Scroll events fire very frequently, so you have to reduce the amount of code that runs when the fire. You could make your code slightly more efficient by not searching the DOM for your elements every time, storing them in variables. Keeping height, color and opacity local to the function will make them quicker to access from within the function. jQuery in general is considerably slower than plain Javascript, but I can see that's not the problem since your JSFiddle example works smoothly. I've made some optimizations to your code, but probably nothing significant. // change header size on scroll $(document).ready(function(){ // variables var vh90 = $(window).height()*(9/10); // Reference to elements var header = $("#header"); var headerBack = $("#header-back"); // control height of header on scroll $(window).scroll(function(){ var height, color, opacity; height = vh90 - $(window).scrollTop(); opacity = 1 - ( (height-80) / vh90 ) * 0.2; color = "rgba(30,30,30," + opacity + ")"; header.css({"height": height, "background-color": color}); headerBack.css({"height": height}); }); }); Link to comment Share on other sites More sharing options...
WoHe Posted June 29, 2017 Author Share Posted June 29, 2017 Thanks, but it (indeed) doesn't give any visible changes to the lags. I have also commented almost all my other code out to check if that causes the problem, but nothing... I'm testing my site with a localhost (using MAMP), do you know if this can be the problem? Link to comment Share on other sites More sharing options...
justsomeguy Posted June 29, 2017 Share Posted June 29, 2017 The server shouldn't affect performance in your browser. I don't see any performance issues on the example though. Link to comment Share on other sites More sharing options...
WoHe Posted June 29, 2017 Author Share Posted June 29, 2017 12 minutes ago, justsomeguy said: The server shouldn't affect performance in your browser. I don't see any performance issues on the example though. No indeed, when I made the jsfiddle I expected it to lag, but it doesn't, it only lags in my browser via my localhost. (same browser as where I open the fiddle) Link to comment Share on other sites More sharing options...
justsomeguy Posted June 29, 2017 Share Posted June 29, 2017 And the code is exactly the same, your test page has no other code except what you put on the other site? Link to comment Share on other sites More sharing options...
WoHe Posted June 30, 2017 Author Share Posted June 30, 2017 No, but I have tried commenting everything out so it was the same and I saw no difference.. Link to comment Share on other sites More sharing options...
justsomeguy Posted June 30, 2017 Share Posted June 30, 2017 I would start with a test page with just that code on it, verify that it works, and then start adding other parts one by one and testing each time to figure out when it changes. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now