如果我调整窗口大小，如果我滚动页面/元素从页面混乱，Javascript按钮不起作用

时间：2017-04-12 12:49:18

标签： javascript jquery html css button

所以，首先我有一个带有“视差”效果的网页，这种效果与滚动页面有关。

我有两个问题：

1）我有一个按钮，用javascript显示/隐藏菜单栏。

$(".show").click(function(){

    $("nav").fadeToggle();
});

按钮完美无缺，直到我滚动页面。此时它停止工作。我按钮位置固定，所以我希望它始终在屏幕上。当我滚动时，菜单栏淡入/淡出。因此，当我向下滚动到下一页时，我想让该按钮显示/隐藏菜单，但它不起作用。它仅在页面一直滚动到顶部时才有效。

2）今天我试图在另一台计算机上用低分辨率的显示器打开我的项目，我发现一切都搞砸了。如果你知道我的意思，当我试图调整窗口大小时搞砸了。第一页的元素下降到秒......依此类推。我该如何解决这个问题？

body,
html {
  height: 100%;
}

.parallax {
  background-image: url('http://www.uniwallpaper.com/static/images/238870_q1e05Ar.jpg');
  height: 100%;
  margin: 0;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax1 {
  background-image: url('http://www.uniwallpaper.com/static/images/eiffel-tower-wallpaper-18_fRZLW4V.jpg');
  height: 100%;
  margin: 0;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax2 {
  background-image: url('http://www.uniwallpaper.com/static/images/eWtfMME_jJm8t1k.png');
  height: 100%;
  margin: 0;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax3 {
  background-image: url('http://www.uniwallpaper.com/static/images/HD-Wallpapers-89_FxDoTt7.jpg');
  height: 100%;
  margin: 0;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax4 {
  background-image: url('http://www.uniwallpaper.com/static/images/pexels-photo_vF03DpP.jpeg');
  height: 100%;
  margin: 0;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax5 {
  background-image: url('http://www.uniwallpaper.com/static/images/Sunset-Village-Wallpaper_8I7ogbf.jpg');
  height: 100%;
  margin: 0;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.slide1 {
  height: 100px;
  background-color: blue;
  font-size: 36px;
}

nav {
  display: none;
  mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
  margin: 17px auto;
  max-width: 1200px;
  position: fixed;
  align: middle;
  width: 100%;
}

nav ul {
  text-align: right;
  background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 255, 255, 30));
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  padding: 20px;
  font-family: "Roboto";
  color: rgba(0, 0, 0, 0.5);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
  font-size: 25px;
  text-decoration: none;
  display: block;
}

nav ul li a:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(0, 0, 0, 0.7);
}

body,
html,
.main {
  height: 100%;
}

.text1 {
  position: relative;
  top: 250px;
}

.p1 {
  color: white;
  font-family: Tahoma, Geneva, sans-serif;
  text-align: center;
}

.style1 {}

.style2 {
  float: left;
  padding-top: 100px;
  padding-left: 100px;
}

.style3 {}

.style4 {}

.style5 {}

button {
  background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 255, 255, 0));
  border: none;
  font-family: "Roboto";
  color: rgba(0, 0, 0, 0.5);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
  text-decoration: none;
  display: block;
  display: inline-block;
  font-size: 26px;
  z-index: 1;
  float: left;
}

.fixed {
  position: fixed;
}

.htmljscss {
  float: right;
  width: 100px;
  height: 100px;
}

.textbackground {
  position: absolute;
  left: 0px;
  top: 150px;
}

.textbackgroundbar {
  overflow: hidden;
  width: 800px;
  height: 50px;
  background: linear-gradient(to right, rgba(255, 255, 255, 30), rgba(255, 0, 0, 0), rgba(255, 255, 255, 30));
}

.dropbtn {
  display: block;
  color: black;
  padding: 10px;
  font-size: 24px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  margin-left: 160px;
  display: block;
}

.dropdown-content {
  display: none;
  position: relative;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
  min-width: 800px;
  min-height: 700px;
  overflow: auto;
  z-index: 1;
}

.dropdown-content a {
  color: red;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.show {
  display: block;
}

.dropdown-content1 {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content1 {
  display: inline-block;
}

.desc {
  padding: 15px;
  text-align: center;
}


/* Make sure that padding behaves as expected */

* {
  box-sizing: border-box
}


/* Container for skill bars */

.container {
  width: 100%;
  /* Full width */
  background-color: #ddd;
  /* Grey background */
}

.skills {
  text-align: right;
  /* Right-align text */
  padding-right: 20px;
  /* Add some right padding */
  line-height: 30px;
  /* Set the line-height to center the text inside the skill bar, and to expand the height of the container */
  color: white;
  /* White text color */
}

.html {
  width: 70%;
  background: linear-gradient(to right, #34e893, #0f3443);
}


/* Green */

.css {
  width: 70%;
  background: linear-gradient(to right, #000046, #1cb5e0);
}


/* Blue */

.js {
  width: 45%;
  background: linear-gradient(to right, #cb356b, #bd3f32);
}


/* Red */

.php {
  width: 30%;
  background: linear-gradient(to right, #141e30, #243b55);
}


/* Dark Grey */

.skillbars {
  width: 550px;
  height: 350px;
  float: right;
  margin-top: 603px;
}

body {
  background-color: #f1f1f1;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
 
 
  <meta charset="UTF-8">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $(function() {
    $("#draggable").draggable();
  });
</script>
<script>
  $(document).ready(function() {
    // Add smooth scrolling to all links
    $("a").on('click', function(event) {

      // Make sure this.hash has a value before overriding default behavior
      if (this.hash !== "") {
        // Prevent default anchor click behavior
        event.preventDefault();

        // Store hash
        var hash = this.hash;

        // Using jQuery's animate() method to add smooth page scroll
        // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
        $('html, body').animate({

          scrollTop: $(hash).offset().top

        }, 800, function() {

          // Add hash (#) to URL when done scrolling (default click behavior)
          window.location.hash = hash;

        });
      } // End if
    });
  });

  $(document).ready(function() {



    $(".show").click(function() {

      $("nav").fadeToggle();
    });
  });

  $(window).scroll(function() {

    if ($(this).scrollTop() > 0) {
      $('.hidescroll').fadeOut();
    } else {
      $('.hidescroll').fadeIn();
    }
  });

  var images = new Array()
  images[0] = "../images/html5.png";
  images[1] = "../images/javascript.png";
  images[2] = "../images/css.png";
  setInterval("changeImage()", 900);
  var x = 0;

  function changeImage() {
    document.getElementById("img").src = images[x]
    x++;
    if (images.length == x) {
      x = 0;
    }
  }



  /* When the user clicks on the button,
   toggle between hiding and showing the dropdown content */
  function myFunction(eleId, event) {
    //
    // stop event propagation in order to avoid the window.onclick execution
    //
    event.stopPropagation();
    //
    // remove show class to previous shown div
    //
    document.querySelectorAll('.dropdown-content.show').forEach(function(ele, idx) {
      ele.classList.remove("show");
    });
    //
    // select by id using the param value
    //
    document.getElementById(eleId).classList.toggle("show");
  }

  // Close the dropdown if the user clicks outside of it
  window.onclick = function(event) {
    //
    // if not a button and not a dropdown-content....
    //
    if (!event.target.matches('.dropbtn') && event.target.closest('.dropdown-content') == null) {
      //
      // remove show class to previous shown div
      //
      document.querySelectorAll('.dropdown-content.show').forEach(function(ele, idx) {
        ele.classList.remove("show");
      });
    }
  }
</script>
<style>
  #draggable {
    width: 1px;
    float: right;
    height: 1px;
    padding: 15px;
    border-style: none;
    background-color: transparent;
  }
  
  body,
  html,
  .main {
    margin: 0px;
    height: 100%;
  }
  
  section {
    min-height: 100%;
  }
</style>

<body>

  <div class="hidescroll">

    <nav>



      <ul>

        <li>

          <a href="#section1" class="hide">Multiplayer online battle arena</a>

        </li>

        <li>

          <a href="#section2" class="hide">League of Legends</a>

        </li>

        <li>

          <a href="#section3" class="hide">Defence of the Ancients 2</a>

        </li>

        <li>

          <a href="#section4" class="hide">Riot</a>

        </li>

        <li>

          <a href="#section5" class="hide">Valve</a>

        </li>

      </ul>

    </nav>

  </div>
  <div class="parallax">
    <div class="fixed"><button class="show"> Show menu</button></div>


    <div id="draggable" class="ui-widget-content">

      <div class="htmljscss">

        <img id="img" width="110px" height="160px" src="../images/html5.png">

      </div>
    </div>
    <div class="skillbars">
      <p class="p1">HTML</p>
      <div class="container">
        <div class="skills html">70%</div>
      </div>

      <p class="p1">CSS</p>
      <div class="container">
        <div class="skills css">70%</div>
      </div>

      <p class="p1">JavaScript</p>
      <div class="container">
        <div class="skills js">45%</div>
      </div>

      <p class="p1">PHP</p>
      <div class="container">
        <div class="skills php">30%</div>
      </div>



    </div>
    <div class="textbackground">
      <div class="textbackgroundbar">
        <div class="dropdown">
          <button onclick="myFunction('myDropdown1', event)" class="dropbtn">Despre mine</button>
          <button onclick="myFunction('myDropdown2', event)" class="dropbtn">Dropdown2</button>
          <button onclick="myFunction('myDropdown3', event)" class="dropbtn">Dropdown3</button>
        </div>
      </div>
      <div id="myDropdown1" class="dropdown-content">
        <p class="p1">
        </p>
      </div>
      <div id="myDropdown2" class="dropdown-content">
        <a href="#home">a</a>
        <a href="#about">b</a>
        <a href="#contact">c</a>
      </div>
      <div id="myDropdown3" class="dropdown-content">
        <a href="#home">asda</a>
        <a href="#about">asdasd</a>
        <a href="#contact">adasda</a>
      </div>
    </div>
  </div>














  <div class="parallax1">
    <div class="main" id="section1">
      <section class="style1">
        <div class="text1">
          <p class="p1">Multiplayer online battle arena (MOBA), cunoscut ca și strategie și acțiune în timp real este un sub gen al jocurilor video de strategie în timp real, în care jucătorul controlează un singur caracter din una dintre cele două echipe. Obiectivul
            este distrugerea structurilor inamice cu ajutorul unităților generate periodic care au drum prestabilit. Jucătorii au în general abilități și avantaje variabile care se îmbunătățesc odată cu trecerea timpului și care contribuie la strategia
            echipei per ansamblu. MOBA este o fuziune între un joc de acțiune și un joc de strategie în timp real, jucătorii nu pot construii clădiri sau unități.</p>

          <p class="p1">Genul a pornit cu Aeon of Strife (AoS) o hartă personalizată pentru StarCraft unde patru jucători fiecare controlând o singură unitate puternică și asistați de unități mai slabe controlate de computer sunt puși împotriva unei echipe mai puternice
            controlată de computer.</p>

          <p class="p1">Defense of the Ancients (DotA), este o hartă bazată pe Aeon of Strife pentru Warcraft III: Reign of Chaos și The Frozen Throne. DotA a fost primul titlu major al genului și primul MOBA în care au fost organizate turnee sponsorizate.</p>

          <p class="p1">DotA a stat la baza jocurilor League of Legends și Heroes of Newerth, urmând o continuare: Dota 2.</p>

          <p class="p1">Blizzard Entertainment anunțând deja că lucrează la propriul MOBA - Heroes of the Storm</p>
        </div>
      </section>
    </div>









  </div>
  <div class="parallax2">
    <div class="main" id="section2">
      <section class="style2">

        <!--azirrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr-->
        <div class="dropdown">

          <img src="../images/Azir.jpg" alt="Azir" width="200" height="100">
          <div class="dropdown-content1">
            <img src="../images/Azir.jpg" alt="Azir" width="829" height="400">
            <div class="desc">Azir</div>
          </div>
        </div>
        <!--fizzzzzzzzzzzzzzzzzzzz-->
        <div class="dropdown">

          <img src="../images/Fizz.jpg" alt="Fizz" width="200" height="100">
          <div class="dropdown-content1">
            <img src="../images/Fizz.jpg" alt="Fizz" width="829" height="400">
            <div class="desc">Fizz</div>
          </div>
        </div>
        <!--zedddddddddddddddddddddddd-->
        <div class="dropdown">

          <img src="../images/Zed.jpg" alt="Zed" width="200" height="100">
          <div class="dropdown-content1">
            <img src="../images/Zed.jpg" alt="Zed" width="829" height="400">
            <div class="desc">Zed</div>
          </div>
        </div>
        <!--dianaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-->
        <div class="dropdown">

          <img src="../images/Diana.jpg" alt="Diana" width="200" height="100">
          <div class="dropdown-content1">
            <img src="../images/Diana.jpg" alt="Diana" width="829" height="400">
            <div class="desc">Diana</div>
          </div>
        </div>

        <!--katarinaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-->
        <div class="dropdown">

          <img src="../images/Project Katarina.jpg" alt="Katarina" width="200" height="100">
          <div class="dropdown-content1">
            <img src="../images/Project Katarina.jpg" alt="Katarina" width="829" height="400">
            <div class="desc">Katarina</div>
          </div>
        </div>
        <!--Yasuooooooooooooooooooooooooooooooo-->
        <div class="dropdown">

          <img src="../images/Yasuo.jpg" alt="Yasuo" width="200" height="100">
          <div class="dropdown-content1">
            <img src="../images/Yasuo.jpg" alt="Yasuo" width="829" height="400">
            <div class="desc">Yasuo</div>
          </div>
        </div>
        <!--Leblancccccccccccccccccccccccccccccccc-->
        <div class="dropdown">

          <img src="../images/Leblanc.jpg" alt="Leblanc" width="200" height="100">
          <div class="dropdown-content1">
            <img src="../images/Leblanc.jpg" alt="Leblanc" width="829" height="400">
            <div class="desc">Leblanc</div>
          </div>
        </div>
        <!--Taaaaaaaaaaaaaaaaaaalon-->
        <div class="dropdown">

          <img src="../images/Talon.jpg" alt="Talon" width="200" height="100">
          <div class="dropdown-content1">
            <img src="../images/Talon.jpg" alt="Talon" width="829" height="400">
            <div class="desc">Talon</div>
          </div>
        </div>

      </section>
    </div>
  </div>




  <div class="parallax3">
    <div class="main" id="section3">
      <section class="style3"></section>
    </div>
  </div>




  <div class="parallax4">
    <div class="main" id="section4">
      <section class="style4"></section>
    </div>
  </div>
  <div class="parallax5">
    <div class="main" id="section5">
      <section class="style5"></section>
    </div>
  </div>





  <div class="parallax"></div>

好的，我把我的整个代码放在这里，我添加了一些随机图像，所以你可以做出一个关于它的ideea。 也许很多事情都错了，搞砸了，但我只是一个初学者，所以请你好好管理。

非常感谢您花时间阅读所有这些内容。我知道这很多。

P.S：抱歉我的英语不好，我还在学习它。

0 个答案:

没有答案
相关问题
最新问题