5
I wanted to add a side banner, depending on the scroll, the banner would accompany the page. The picture shows what I want to do:
But the banner can never cross some boundaries, IE, can not go over the header
nor the footer
and bearing in mind that the page size is not always the same. Can I limit this with Divs? Or can I give a limit, for example, to give a spacing up and down? And how do I get the banner to move depending on the scroll?
I’ve done the following:
<style>
@media screen and (max-width: 770px) {
#getFixed {
display: none;
}
}
#getFixed { padding: 100px 0px 0 0px; margin: 0px; z-index: 2; }
</style>
<script>
function fixDiv() {
var $cache = $('#getFixed');
if ($(window).scrollTop() > 350)
$cache.css({'position': 'fixed', 'top': '10px'});
else
$cache.css({'position': 'relative', 'top': 'auto'});
}
$(window).scroll(fixDiv);
fixDiv();
</script>
<div id="getFixed" style="margin-top: 35px;">
<img src="<?php echo $banner;?>" width="220">
</div>
The problem is that the image goes over the footer, can I draw a line? What’s happening to me is this (the banner is over the footer):
@pc_pc if you create one more condition limiting the area it should not invade would not solve?
– HeltonSS
@Heltonss yes, but how? Can you help me?
– pc_oc
Here’s a practical example that Danilo said https://www.devexpress.com/support/demos/ Banner live chat in the right corner.
– Leandro Brito
@pc_oc banner can be below (hidden) header or footer?
– R3oLoN
@R3olon the idea wasn’t to get under the footer, because I’m already going around it with a z-index.
– pc_oc