Witam,
jestem już prawie u celu, ale brakuje mi jeszcze dosłownie jednej rzeczy.. Otóż chcę zrobić przyklejony obrazek, który podczas scrollowania strony będzie cały czas w tej samej pozycji (tzn. od swojego położenia początkowego) - jest to obrazek na pasku bocznym. Ma się zatrzymać kiedy skończy się #main-content - główny tekst strony internetowej. Udało mi się uzyskać zbliżony efekt, tyle że po dojechaniu do momentu, gdzie kończy się #main-content to obrazek znika.. pojawia się dopiero gdy wracam do góry. Potrzebna mi jesst tylko ta modyfikacja żeby obrazek po prostu się zatrzymał, a nie znikł, a potem normalnie jak przewijam znowu na górę, to żeby normalnie zatrzymał się w swoim początkowym położeniu.

<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 SavY = $('#main-content').offset().top + $('#main-content').height() - $('.nav').height()


  
 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'});
}
 
 };

 stickyNav();
  
 $(window).scroll(function() {
  stickyNav();
 });
 });
 
</script>
#main-content
{
width: 750px;
margin-left: 10px;
float: left;
text-align: justify;
}

.image
{
width: 750px;
float: center;
margin-left: 35px;

}

div#advert
{
display: block;
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;

}

<!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>


JS jest poprawnie umieszczony w html, tu dałem osobno aby było lepiej widoczne. Chodzi tylko o modyfikację w JS, zapewne dodatkowa instrukcja warunkowa.. tyle, że nie mam pomysłu już. Chyba że da się tą modyfikację zrobić w CSS, próbowałem z position: absolute, ale nie działa. Z góry dziękuję za pomoc!