Witam,
zainspirowany trzecim odcinkiem CSS od Pana Mirosława Zelenta z przyklejanym menu (sticky), chcialem stworzyć coś podobnego, lecz nie z menu, tylko obrazkiem. Tym obrazkiem ma być reklama z linkiem, umieszczona po prawej stronie (coś takiego jak przyklejany pasek boczny). Widziałem to również na jednym blogu, lecz niestety kod nie był ujawniony, nie można było "zbadać" (chrome).
Mniej więcej mi to działa, problem polega jedynie na tym, że gdy już się zbliża do końca, to ten obrazek wjeżdża na stopkę i ją zasłania. Dodam tylko, że jeszcze nie uczyłem się javascriptu.. szukałem w internecie rozwiązania na mój problem, w końcu natknąłem się na takie rozwiązanie w javascript, lecz nie wychodzi mi do końca, tak jak mówiłem. Będę bardzo wdzięczny za pomoc i za wyrozumiałość.
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Blog</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Lato%7CJosefin+Sans&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<script>
var ml_webform_695892 = ml_account('webforms', '695892', 'g5b7p7', 'load');
ml_webform_695892('animation', 'fadeIn');
</script>
</head>
<body>
<!-- OBRAZ/OBRAZ Z TYTULEM -->
<div id="heading">
<img class="heading2" align="center" height="450" src="" width="1120" />
</div>
<!-- GLOWNY KONTENT -->
<div id="main-content">
<!-- TYTUL -->
<!-- TEKST -->
<p></p>
<p></p>
<!-- KONIEC TEKSTU -->
<div class="image">
<img class="image2" align="center" width="600" height="400" src="link"/>
</div>
<p></p>
<p></p>
<!-- TEKST -->
</div>
<div id="advert">
<div class="nav">
<nav>
<a href="LINK">
<img class="image3" align="center" src="LINK"/></a>
</nav>
</div>
</div>
</body>
</HTML>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var NavY = $('.nav').offset().top;
var stickyNav = function(){
var ScrollY = $(window).scrollTop();
if (ScrollY > NavY) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
Kod javascript wklejony tak jak u Pana MZ, po divie zamykającym ADVERT i przed BODY.
#main-content
{
width: 750px;
margin-left: 10px;
float: left;
text-align: justify;
}
.image
{
width: 750px;
float: center;
margin-left: 35px;
}
div#advert
{
width: 300px;
height: 600px;
position: absolute;
right:0;
margin-bottom: 600px;
margin-right:30px;
}
.sticky
{
position:fixed;
top:0;
right:10;
z-index:100;
margin-right:20px;
bottom:200;
}
Strona działa, problem jedynie z javascript, ewentualnie przekształcenie w css lub w html.
Z góry dziękuję za pomoc!
#AKTUALIZACJA
Udało mi się sprawić, że dany obrazek nie wchodzi na stopkę, lecz teraz znika kiedy zrówna się z końcem #main-content. Poprawiłem kod na taki:
var stickyNav = function(){
var ScrollY = $(window).scrollTop();
if (ScrollY > NavY && ScrollY < SavY) {
$('.nav').addClass('sticky');
} else if (ScrollY <= NavY || ScrollY >= SavY){
$('.nav').removeClass('sticky');
}
if (ScrollY > SavY) {
$('.nav').css({ top: SavY + 'px' })
}else {
$('.nav').css({top:'0px'});
}
};
