Jump to content

help with speed problem (lagging)


Recommended Posts

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 by WoHe
Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...