Streaming live at 10am (PST)

How to stop site scrolling down when Div display is set to none

#1

Hi,

I have an interaction that makes a full page search div visible when the search button is clicked.

Then when the close button is clicked the div display is set to none again. This is causing the whole page to scroll down. How do I stop this?

Am I going to need to put in some custom is to stop this or am I missing something in the animation settings?


Here is my public share link: LINK
(how to access public share link)

1 Like
#2

Hey @Joe_Priestman

You will need some custom code. Here’s something that can help > Prevent scrolling while menu is open

Piter :webflow_heart:

2 Likes
#3

@PiterDimitrov this is exactely was I was looking for since some time ! Thanks for sharing :slight_smile:

1 Like
#4

@PiterDimitrov @anthonysalamin

I tried following what you showed and it was close to the final answer! The additional problem I had was combining the functionality with a webflow animation.

In the end I deleted the animation and went for this:

<script>
$(document).ready( function(){
  $('#search-button').click(function() {
    $('#search-icon').toggle();
    $('#search-close').toggle();
    $('.search-div').fadeToggle();
	$('body').scrollTop(0);
  });
});
</script>  

Simple and effective.

Noticeably from the example you gave the Weblow.push method seemed to be causing it not to work. And as I don’t know what that does I just went for the straight jQuery. Am I missing something essential doing that?

1 Like