Is it possible to make $(window) stick to a particular element and not move?

Question

I'm working on a rather full-on site using jQuery (if the solution is not using jQuery, that is also fine).

The website is built using sections that resize to the height of the window using:

    $(window).resize(function() {
    $("section").height($(window).height())
    }).resize()

This part is working brilliantly. I have disabled scrolling by taking the overflow off the body and html elements and the user can travel through the site using relative links (with localScroll).

My issue is that once the user has travelled to a section and then resizes the window, the body is no longer in line with the top of the section.

Is there a way to make the window stick to the top of an element no matter what?

Answer 1

Take note of which section is current. When the window resizes, you can then set the window's scroll top to the top of that section. For example:

var currentSection = $('section:eq(0)');
var jqWindow = $(window).resize(function() {
    $('section').height(jqWindow.height());
    jqWindow.scrollTop(currentSection.offset().top);
});