I have a block (1), which at some point becomes fixed and sticks to the top of the page.

$(document).ready(function(){ $(window).scroll(function(){ var bo = $(window).scrollTop(); if ( bo > 300 ) { $('.akcii').addClass('fixedblock'); $('.left_side').addClass('fixedblockLeftSide'); $('.content_catalog').addClass('fixedblockContent'); } else { $('.akcii').removeClass('fixedblock'); $('.left_side').removeClass('fixedblockLeftSide'); $('.content_catalog').removeClass('fixedblockContent'); } });

enter image description here However, upon reaching the “recently viewed items” block (2), it must stop. The difficulty is that block (3) is implemented with additional loading of goods, so it’s impossible to just calculate the length of the entire page and subtract block (2)

    2 answers 2

    Sorry, maybe I misunderstood the essence of the question, but why calculate the length of the entire page? I had a similar task. I calculated the height of the block (1), and added it to $ (window) .scrollTop (). After that, he calculated the block indentation (2) from the beginning of the page. Then I took the amount from the option for the block (2) - I got a number that you need to move up the block (1) For example:

     var topShift = 0; var shift = divShift - sum; if(shift< 0) { topShift = shift; }

    Again, if I understand your problem correctly.

    • Again, I can be wrong, but in such cases (if you need to stick the cap), this is done in the following way: (at least I don’t know the others) 2 identical containers (Heder) are made, one is placed on the page, as usual, and the second give a fixed value, with the second hide (display: none) until a certain moment. I used this method when it was necessary from a certain point (scrolling to a certain line), the header stuck to the upper edge of the browser. But I do not fully understand what you want to implement, so this method may not suit you. - Valery
    • it is not clear in your first method how can I calculate the block indent (2) from the beginning of the page, if I have content loading and the indent from the beginning of the page increases accordingly - Jussia
    • @Jussia you can use: var offsetTop = Element.getBoundingClientRect (). Top + document.body.scrollTop; or $ ("div.content"). offset () - Valery
    • @Jussia, If you still do not understand, tell me, I will add a piece of code in the answer above. - Valery
    • $ ("div.content"). offset () returns undefined and var offsetTop = Element.getBoundingClientRect (). top + document.body.scrollTop returns that getBoundingClientRect () is not a function. Please add to the code, because it is not entirely clear) - Jussia

    I advise you to try to do with jquery-viewport-checker

     $(document).ready(function() { $('.example').viewportChecker({ /* body */ }); });

    The body will execute when .example appears in view.

    • it will not work for me, since in body I can only transmit certain values ​​of the classToAdd type: 'visible animated fadeIn', offset: 100 and only for $ ('. example'). I also need to (1) stop when it comes to (2) - Jussia