CODEWITHSUNDEEP
javascriptjquery
user3024693
user3024693

Reputation: 7

How can I position an element to bottom of browser window and only showing content when scrolling?

On the website in the link below, the Logo stays on the bottom of the page when the window ist resized and the content beneath isn't visable till you scroll the site up or down. This works on mobile devices too. How can I manage it to position a DIV to the bottom of the browserwindow so that the following DIV is hidden until you begin to scroll? Here is a Link of a Site that shows exactly what I would like to reprogramm.

Please visit this Site as an example

Thanks in advance

Upvotes: 0

Views: 121

Answers (2)

marswoody
marswoody

Reputation: 41

CSS:

#element {
display: none;
/* and other CSS */
}

jQuery:

$(document).on("scroll", function () {
    if ($(this).scrollTop() > 100) { /* change the integer to whatever you need */
        $("#element").fadeIn("slow");
    } else {
        $("#element").fadeOut("slow");
    }
});

Upvotes: 1

isherwood
isherwood

Reputation: 61083

First, the element has fixed positioning and is hidden:

#dynamic-to-top {
    display: none;
    overflow: hidden;
    width: auto;
    z-index: 90;
    position: fixed;
    bottom: 20px;
    right: 20px;
    top: auto;
    left: auto;
    ...

Then, a jQuery function listens for the scroll event. It appears that a calculation is done to see whether the page has scrolled downward past a certain point. Many examples of this behavior exist on SO and the web.

Upvotes: 0

Related Questions