Geek Answers Handbook

How to fix buggy title collapsing in navigation bar

I am trying to create a heading that slowly collapses to the navigation bar when scrolling down (the height of the heading decreases when scrolling down until it reaches a height of 70 pixels when it becomes sticky to the top of the screen).
I managed to achieve this, however it is extremely buggy, and this is probably not the most “clean” way to handle it ... This is what I did: http://www.stroba.uk .
As you can see, this is pretty buggy and not quite smooth. I also created a simplified jsfiddle of what I'm trying to do: http://jsfiddle.net/uvwusfy2/ .
Does anyone know how I can fix this "buggy"? Will this be another way to do this or improve my way of doing this?

If the way I do this confuses you, here is the explanation:

HTML

<div class="Container">
    <div class="space"></div>
    <div class="header">
        This is the header that should turn into a nav bar as you scroll down to where it has a height of 70px
    </div>
    <div class="content">
        This is some content...<br>
        This is some content...<br>
        This is some content...<br>
        This is some content...<br>
        This is some content...<br>
        This is some content...<br>
        This is some content...<br>
    </div>
</div>

Here I create the title, contents and space of the div, which I will later fill with jQuery.

CSS

div.Container {
color:white;
font-family:arial;
}
div.space {
    width:100%
    height:0px;
}
div.header {
    height:300px;
    width:100%;
    background: linear-gradient(
      to bottom,
      #5d9634,
      #5d9634 50%,
      #538c2b 50%,
      #538c2b
    );
    background-size: 100% 20px;
}
div.header nav {
    position:absolute;
    bottom:0;
    right:0;
}
div.content {
    height: 1500px;
    background-color:blue;
    background: repeating-linear-gradient(
      45deg,
      #606dbc,
      #606dbc 10px,
      #465298 10px,
      #465298 20px
    );
}

JQuery

$(function() {
    var initialHeaderHeight = $("div.header").height();
    $(window).scroll(function(event) {
        var st = $(window).scrollTop();
        var headerHeight = $("div.header").height();
        if (st < initialHeaderHeight - 70) {
            $("div.header").height(initialHeaderHeight - $(window).scrollTop());
            $("div.space").height($(window).scrollTop());
            $("div.header").css("position", "relative");
            $("div.content").css("top", "0");
        } else {
            $("div.header").css("position", "fixed");
            $("div.header").css("top", "0");
            $("div.content").css("top", "70px");
        }
    })
});

Here I make it so that as the user scrolls down the page, the title gets smaller and the div "space" gets bigger and takes up the space that the title took before the user scrolls down, so it seems, for example, the content scrolls up , and the title is getting smaller.
I'm sorry that this can be hard to understand, but I just wanted to know if there is a way to improve the code so that the page scroll process is smoother and less confusing.

+4
source share
2 answers

, jQuery, .

DOM , $(window).scroll, , . , jQuery, $('div.header'), jQuery (div.header). , , CSS .

, .header, .space .content , DOM , . :

$(function () {
    // retrieve and store header, space and content:
    var $header = $('div.header'),
        $space = $('div.space'),
        $content = $('div.content'),
        initialHeaderHeight = $header.height(),
        // declare variables to use in the event handler,
        // to avoid redeclaring them at every call:
        st,
        headerHeight;

    $(window).scroll(function (event) {
        st = $(window).scrollTop();
        headerHeight = $header.height();
        if (st < initialHeaderHeight - 70) {
            // reuse the $space, $header, $content, and st values, 
            // to avoid repeated $("") and $(window).scrollTop() calls:
            $header.height(initialHeaderHeight - st);
            $space.height(st);
            $header.css("position", "relative");
            $content.css("top", "0");
        } else {
            // reuse $header and $content to avoid
            // repeated $("") calls, and
            // use alternative .css() syntax to eliminate
            // additional .css() call on $header:
            $header.css({
                position: "fixed",
                top: 0
            });
            $content.css("top", "70px");
        }
    });
});

Update:

, .header , .space .content .

:

div.header {
    position: fixed;
    top: 0;
}

, , - . , , :

$space.height(initialHeaderHeight);

, , :

$(window).scroll(function (e) {
    st = e.delegateTarget.scrollY; // get scrollDiff from scroll event
    if (st < initialHeaderHeight - 70) {
        headerHeight = initialHeaderHeight - st;
    } else {
        headerHeight = 70;
    }
    $header.height(headerHeight);
});

+1

CSS transition, :

FIDDLE DEMO

div.header {
    height:300px;
    width:100%;
    background: linear-gradient(
      to bottom,
      #5d9634,
      #5d9634 50%,
      #538c2b 50%,
      #538c2b
    );
    transition: height 500ms; //Add this line
    background-size: 100% 20px;
}

, , .

0

More articles:


All Articles