I am currently in the process of creating a website that functions as a single page site.
The main feature of the site is a masonry grid of images. When a user clicks on an item, a detailed panel slides in from the left. Once the panel is closed, it slides out and the grid reverts back to its original position.
However, I'm facing an issue where the scroll resets when the grid comes back into view. This can be frustrating for users, especially if the grid contains hundreds of items.
I have attempted to cache the scrollTop of the grid div and apply it to the close button of the panel so that the grid returns to its initial position. Unfortunately, this solution only worked with a timeout function, which is not the desired effect.
I am looking for a way to lock the grid while the panel is displayed and unlock it once the panel is closed. Is there a method or technique that could achieve this?
You can view a basic example of the structure in this JSFiddle: http://jsfiddle.net/kxdy3bb5/2/
var $workItems = $(' #workLinks > li '),
$sectionWork = $(' #workSection '),
$workPanelsContainer = $('#panels'),
$workPanels = $workPanelsContainer.children('div'),
$closeWorkItem = $('div#closeBtn');
// Functionality when clicking on a work item
$workItems.on('click', function (event) {
// Minimize main section
$sectionWork.addClass('slide-out');
// Display panel for selected work item
var $panel = $workPanelsContainer.find("[data-panel='" + $(this).data('panel') + "']");
currentWorkPanel = $panel.index();
$panel.addClass('show-panel');
});
// Close current work item and show the list again
$closeWorkItem.on('click', function (event) {
var $currentPanel = $workPanels.eq(currentWorkPanel);
$sectionWork.removeClass('slide-out');
$workPanels.eq(currentWorkPanel).removeClass('show-panel');
$('.workWrapper').scrollTop(1000);
});
Any assistance or suggestions would be incredibly valuable and appreciated.