Problem with CSS. Try to put position fixed on skyscraper-ad, but it doesn't work as I want

A

Anonymous

Guest
Hey folks and coders :D I am new here and hope you are doing well everybody.

I try to code a website, where there is an advertisment skyscraper on the right side (346x920 Pixel). This is no problem so far, but I try to use JQuery to fix the position of the DIV-Tag, as soon as I scroll down. Now my problem and situation is, that at the end, the advertisment is not behind the footer and social media icons.

I want that as soon as you arrive the end of the site, the ad-skyscraper is hidden behind the black footer bar and the icons.

You can find a very simple demo at the following attached file (open index.php, after put everything somewhere online).

Would appreciate every help. I understand and write ENG, FR and DE.

Thank you so far. Cheers from Switzerland

Fabrice
 

Attachments

  • demo-file.zip
    53.9 KB · Views: 128
First of all, if you want to show your code then please push it to github (as a standard repo or gist) or similar, then you will be able to get answer faster.

Before you are changing the position from relative to fixed you need to get real position of the element:
Code: 
    if (currentScroll >= WerbungFixiertRechts)
    {
        const realLeft = $('.WerbungFixieren').offset().left;
        $('.WerbungFixieren').css({
            position: 'fixed',
            top: '7px',
            left: realLeft  + 'px',
        });
    }
But better way is changing only css classes to change the floating mode

Additionally I recommend to you to do not use the echo function to print html tags. The index.php should looks like:
Code: 
<?php

$FestgelegteSprache = $_COOKIE['FestgelegteSprache'];
setcookie("FestgelegteSprache", 'de', time() + (31536000), "/");

?><!doctype html>
<html lang="de">
<head>
...

And in .js file should be only js code, do not put there html tags to include it with php, in the html part use <script src="..."> instead
 
Here's a simplified example of how you can achieve this effect using jQuery:

$(document).ready(function() {
$(window).scroll(function() {
var scrollPos = $(window).scrollTop();
var pageHeight = $(document).height();
var footerHeight = $('footer').outerHeight();

if (scrollPos + $(window).height() >= pageHeight - footerHeight) {
// Reached the end of the site, apply CSS to hide the ad-skyscraper behind the footer and icons
$('.ad-skyscraper').css({
'position': 'fixed',
'bottom': footerHeight,
'z-index': 1
});
} else {
// Not at the end, reset the position of the ad-skyscraper
$('.ad-skyscraper').css({
'position': 'relative',
'bottom': 'auto',
'z-index': 'auto'
});
}
});
});
 
You must log in or register to reply here.
Back
Top