Jump to content
WoHe

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

Share this post


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});
    });
});

 

Share this post


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?

Share this post


Link to post
Share on other sites

The server shouldn't affect performance in your browser.  I don't see any performance issues on the example though.

Share this post


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)

Share this post


Link to post
Share on other sites

And the code is exactly the same, your test page has no other code except what you put on the other site?

Share this post


Link to post
Share on other sites

No, but I have tried commenting everything out so it was the same and I saw no difference..

Share this post


Link to post
Share on other sites

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.

Share this post


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...