当屏幕宽度大于特定宽度时如何恢复事件

Question

When the screen size is less than 987px, I want to add an event on Menu icon that will move the header 150px into the right and when I click again, it will push the header -150 into the left. The problem is when the screen width is greater than 789, the header has been moved accordingly which I don't want. How can I restore the header automatically into it's actual position again as it were before whenever screen width is greater than 789?

Answer 1

you can do css example

@media only screen and (max-width:987px) {
.menu{
margin-left:150px;
}
}

Answer 2

If I understand your question correctly, you want a conditional behaviour of your button clicks - the clicks should work on resolutions with less than 789px width (the question is not specific on this, but I'm assuming you mean the width).

To achieve this, you can do something like in the code below (the appropriate fiddle can be found here - in it, you can experiment with the width of the document, which is something you can not do here on SO).

 const nav = document.getElementsByTagName("nav")[0]; const btn = document.getElementById("clicker"); btn.addEventListener("click",moveHeader); function moveHeader() { let wd = window.innerWidth; console.log(wd); if(wd < 789) { nav.classList.toggle("moved"); } else { nav.classList.remove("moved"); } } window.addEventListener("resize", function() { if(this.innerWidth > 789) { nav.classList.remove("moved"); } });

 #controller { display: inline-block; width: 100px; position: relative; border-right: 2px solid black; } button { margin: 15px auto; } #content { display: inline-block; overflow: hidden; } #content div, nav { display: block; } nav { width: 100%; background-color: #ccc; } nav a { padding: 15px; } #content div { margin-top: 15px; margin-left: 15px; }.moved { margin-left: 150px; }

 <div id="controller"> <button id="clicker"> Click me </button> </div> <div id="content"> <nav> <a href="#">Home</a> <a href="#">Portfolio</a> <a href="#">Contact</a> </nav> <div> Lorem ipsum sit dolor amet etc </div> </div>

There are a couple of things to note:

• the class moved contains the CSS rules for moving the header / navigation to the right (150px). There are other ways to achieve this ( position: absolute etc), but I decide on the simplest one for the sake of illustration.
• if you want to have a fairly smooth animation of the header going back and forth, you could change these rules (or adapt them for your particular case):

nav {
  width: 100%;
  background-color: #ccc;
  transition: 0.5s; /* this part here */
}

...

.moved {
  margin-left: 150px;
  transition: 0.5s; /* this part here */
}

• the same class is toggled on your button click ( moveHeader function), if and only if the window width is less than 789px. The reason for using the toggle - your users might keep clicking on the button, and it will keep sending the header / navigation away, and pulling it back. Since I don't know the layout of your page, this solution will let you things like open and close the navigation, send it offscreen, and bring it back, etc
• the window has an event listener attached to it - your users might change the width of their browsers, they might stack windows on their desktops, they might rotate their tablets and phones, etc, and by doing so, they might change the screen width. If that happens, you need to be able to go back to the original functionality for < 789px width. Of course, this code covers only the width change. For handling a potential change in screen orientation, please see this SO answer - be sure to check the canIUse screenshot attached to it.