div fixed to bottom - stop scrolling at footer (with JS)

M

methyer

New Member
Hello fellow Web-Developers and Designers,

I have come across a problem I wish to solve urgently and have spend the entire day trying to solve on my own, without much success.

I have managed to lay out the basic scripts and this should be no problem for those who you who know more about JavaScript than I.

Basically I wish to display a neat border on the bottom of a page (which I did through css, position: fixed; bottom: 0; ). Yet, this method would overlay the footer. I am trying to impede this 'bottom-page-border' to go to far as one continues scrolling down-ward.

I believe that my work has advance quite a lot throughout the day and hope it will be an easy task for you to find the error in the JavaScript that has escaped me (my JS is very poor).

The rest (HTML & CSS) should be quite fine.

Here the example
Also, I would like to maintain the HTML-Markup the way it is built - I know that so many divs do not make much sense this way, but of cause there is real content on the real page, depending on this very structure.

However, my acctual problem is the fact that the simulator of "jsfiddle" produces everything the way it is supposed to work, but as soon as I include the codes in my page or even in a separate simple setup (the same as you see in jsfiddle) it won't work.

Thank you so much for you help!

(By the way: I have been searching all over Google for alternative solutions and wish to note that asking you is the result of various hours of trying. ;D )

Methyer
 
Last edited:
M

methyer

New Member
Chrishirst, thank you for your response - but I might not have been clear enough.

I am not searching for a sticky footer solution and have found the first two the links you proposed already during my search yesterday. I am searching for a way to make a fixed-position (bottom) div-element stop being fixed when hitting the sticky footer, which I have already established.
And the third link seems to serve only for the calculation of an abolute window height (in pixel) to position a footer on the bottom of a page (my problem is not the positioning, but stoping the element at a certain point.) - Also, my solution must work with variable heights, independent for each page (in accordance with, height:100%; and not height: #px; ).

Please have another look at the example I posted in my first post, and you will understand.

As I mentioned earlier, the problem lies within the JS - I do not search for a new solution, but a correction.

Thank you.
 
Last edited:
chrishirst

chrishirst

Well-Known Member
Staff member
Please, I really can't be bothered pratting about with this stupid jsfiddle crap. It means absolutely NOTHING as an "example".

Personally I have no need of such toys and would much rather see a REAL HTML DOCUMENT.
 
You must log in or register to reply here.
Top