Fatal编程技术网
  • javascript/
  • Javascript 一旦我点击一个菜单选项，整个页面就会随之滚动？我该怎么阻止这一切？

Javascript 一旦我点击一个菜单选项，整个页面就会随之滚动？我该怎么阻止这一切？

javascript jquery html css

Javascript 一旦我点击一个菜单选项，整个页面就会随之滚动？我该怎么阻止这一切？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,一旦我点击一个菜单选项，整个页面就会随之滚动？我该怎么阻止这一切 位于JSFIDLE的第411行 <style>@import url(http://fonts.googleapis.com/css?family=Oswald:400,300|Raleway:400,600,300|Source+Sans+Pro:400,600,300); @charset 'UTF-8'; /* Base Styles */ #cssmenu, #cssmenu u

一旦我点击一个菜单选项，整个页面就会随之滚动？我该怎么阻止这一切

位于JSFIDLE的第411行

<style>@import url(http://fonts.googleapis.com/css?family=Oswald:400,300|Raleway:400,600,300|Source+Sans+Pro:400,600,300);
    @charset 'UTF-8';
    /* Base Styles */
    #cssmenu,
    #cssmenu ul,
    #cssmenu li,
    #cssmenu a {
      margin: 0;
      padding: 0;
      border: 0;
      list-style: none;
      font-weight: normal;
      text-decoration: none;
      line-height: 1;
      font-family: 'Oswald', sans-serif;
      font-weight: 400;
      font-size: 15px;
      position: relative;



    }
    #cssmenu a {
      line-height: 1.3;
    }
    #cssmenu {
      width: 200px;

    }
    #cssmenu > ul > li > a {
      padding-right: 40px;
      font-size: 13px;
      font-weight: bold;
      display: block;
      background: #000000;
      color: #9C9C9C;
      border-bottom: 1px solid #393939;
      text-transform: uppercase;

    }
    #cssmenu > ul > li > a > span {
      background: #000000;
      padding: 10px;
      display: block;
      font-size: 15px;
      font-weight: 300;
    }
    #cssmenu > ul > li > a:hover {
      text-decoration: none;
    }
    #cssmenu > ul > li.active {
      border-bottom: none;
    }
    #cssmenu > ul > li.active > a {
      color: #fff;
    }
    #cssmenu > ul > li.active > a span {
      background: #000000;
    }
    #cssmenu span.cnt {
      position: absolute;
      top: px;
      right: 15px;
      padding: 0;
      margin: 0;
      background: none;
      padding-top: 20px;
    }
    /* Sub menu */
    #cssmenu ul ul {
      display: none;
    }
    #cssmenu ul ul li {
      border: 1px solid #2A2A2A;
      border-top: 0;
    }
    #cssmenu ul ul a {
      padding: 10px;
      display: block;
      color: #FFFFFF;
      font-size: 13px;
      font-weight: 200;
      font-family: 'Source Sans Pro', sans-serif;
    }
    #cssmenu ul ul a:hover {
      color: gray;
    }
    #cssmenu ul ul li.odd {
      background: #2E2E2E;
    }
    #cssmenu ul ul li.even {
      background: #2E2E2E;
    }</style>

    <style>
        .class_slidshow2 {
       padding-left: 200px;
    }
    .rslides li {
      -webkit-backface-visibility: hidden;
      position: absolute;
      display: none;
      width: 100%;
      left: 0;
      top: 0;
      padding-left: 200px;
      }



    <style>.slideshow {
        font-size: 30px;
        text-transform: uppercase;
        font-family: Arial, Verdana, sans-serif;
        color: #a81c11;
        display:inline;
        width: 80%; /* or dependent on what you like */
        float: left;

    } 

    .slideshow {
        float: right;
        display:inline;
        width: 20%; /* relative to width for introtekst */

    }</style>

    <style>@import url(http://fonts.googleapis.com/css?family=Oswald:400,300|Raleway:400,600,300|Source+Sans+Pro:400,600,300);
@charset 'UTF-8';
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 15px;
  position: relative;



}
#cssmenu a {
  line-height: 1.3;
}
#cssmenu {
  width: 200px;

}
#cssmenu > ul > li > a {
  padding-right: 40px;
  font-size: 13px;
  font-weight: bold;
  display: block;
  background: #000000;
  color: #9C9C9C;
  border-bottom: 1px solid #393939;
  text-transform: uppercase;

}
#cssmenu > ul > li > a > span {
  background: #000000;
  padding: 10px;
  display: block;
  font-size: 15px;
  font-weight: 300;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {
  border-bottom: none;
}
#cssmenu > ul > li.active > a {
  color: #fff;
}
#cssmenu > ul > li.active > a span {
  background: #000000;
}
#cssmenu span.cnt {
  position: absolute;
  top: px;
  right: 15px;
  padding: 0;
  margin: 0;
  background: none;
  padding-top: 20px;
}
/* Sub menu */
#cssmenu ul ul {
  display: none;
}
#cssmenu ul ul li {
  border: 1px solid #2A2A2A;
  border-top: 0;
}
#cssmenu ul ul a {
  padding: 10px;
  display: block;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 200;
  font-family: 'Source Sans Pro', sans-serif;
}
#cssmenu ul ul a:hover {
  color: gray;
}
#cssmenu ul ul li.odd {
  background: #2E2E2E;
}
#cssmenu ul ul li.even {
  background: #2E2E2E;
}</style>

<style>
    .class_slidshow2 {
   padding-left: 200px;
}
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  padding-left: 200px;
  }



<style>.slideshow {
    font-size: 30px;
    text-transform: uppercase;
    font-family: Arial, Verdana, sans-serif;
    color: #a81c11;
    display:inline;
    width: 80%; /* or dependent on what you like */
    float: left;

} 

.slideshow {
    float: right;
    display:inline;
    width: 20%; /* relative to width for introtekst */

}</style>
我还有其他几个问题。滚动时如何将整个导航菜单保持或粘贴到右侧？在一个更详细的问题中。我希望我的内容在导航菜单的右边，会有很多内容，所以一旦用户滚动，他们应该仍然能够看到导航菜单，而不必向上滚动，这是为了我个人的吸引力

位于JSFIDLE的第411行

<style>@import url(http://fonts.googleapis.com/css?family=Oswald:400,300|Raleway:400,600,300|Source+Sans+Pro:400,600,300);
    @charset 'UTF-8';
    /* Base Styles */
    #cssmenu,
    #cssmenu ul,
    #cssmenu li,
    #cssmenu a {
      margin: 0;
      padding: 0;
      border: 0;
      list-style: none;
      font-weight: normal;
      text-decoration: none;
      line-height: 1;
      font-family: 'Oswald', sans-serif;
      font-weight: 400;
      font-size: 15px;
      position: relative;



    }
    #cssmenu a {
      line-height: 1.3;
    }
    #cssmenu {
      width: 200px;

    }
    #cssmenu > ul > li > a {
      padding-right: 40px;
      font-size: 13px;
      font-weight: bold;
      display: block;
      background: #000000;
      color: #9C9C9C;
      border-bottom: 1px solid #393939;
      text-transform: uppercase;

    }
    #cssmenu > ul > li > a > span {
      background: #000000;
      padding: 10px;
      display: block;
      font-size: 15px;
      font-weight: 300;
    }
    #cssmenu > ul > li > a:hover {
      text-decoration: none;
    }
    #cssmenu > ul > li.active {
      border-bottom: none;
    }
    #cssmenu > ul > li.active > a {
      color: #fff;
    }
    #cssmenu > ul > li.active > a span {
      background: #000000;
    }
    #cssmenu span.cnt {
      position: absolute;
      top: px;
      right: 15px;
      padding: 0;
      margin: 0;
      background: none;
      padding-top: 20px;
    }
    /* Sub menu */
    #cssmenu ul ul {
      display: none;
    }
    #cssmenu ul ul li {
      border: 1px solid #2A2A2A;
      border-top: 0;
    }
    #cssmenu ul ul a {
      padding: 10px;
      display: block;
      color: #FFFFFF;
      font-size: 13px;
      font-weight: 200;
      font-family: 'Source Sans Pro', sans-serif;
    }
    #cssmenu ul ul a:hover {
      color: gray;
    }
    #cssmenu ul ul li.odd {
      background: #2E2E2E;
    }
    #cssmenu ul ul li.even {
      background: #2E2E2E;
    }</style>

    <style>
        .class_slidshow2 {
       padding-left: 200px;
    }
    .rslides li {
      -webkit-backface-visibility: hidden;
      position: absolute;
      display: none;
      width: 100%;
      left: 0;
      top: 0;
      padding-left: 200px;
      }



    <style>.slideshow {
        font-size: 30px;
        text-transform: uppercase;
        font-family: Arial, Verdana, sans-serif;
        color: #a81c11;
        display:inline;
        width: 80%; /* or dependent on what you like */
        float: left;

    } 

    .slideshow {
        float: right;
        display:inline;
        width: 20%; /* relative to width for introtekst */

    }</style>

    <style>@import url(http://fonts.googleapis.com/css?family=Oswald:400,300|Raleway:400,600,300|Source+Sans+Pro:400,600,300);
@charset 'UTF-8';
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 15px;
  position: relative;



}
#cssmenu a {
  line-height: 1.3;
}
#cssmenu {
  width: 200px;

}
#cssmenu > ul > li > a {
  padding-right: 40px;
  font-size: 13px;
  font-weight: bold;
  display: block;
  background: #000000;
  color: #9C9C9C;
  border-bottom: 1px solid #393939;
  text-transform: uppercase;

}
#cssmenu > ul > li > a > span {
  background: #000000;
  padding: 10px;
  display: block;
  font-size: 15px;
  font-weight: 300;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {
  border-bottom: none;
}
#cssmenu > ul > li.active > a {
  color: #fff;
}
#cssmenu > ul > li.active > a span {
  background: #000000;
}
#cssmenu span.cnt {
  position: absolute;
  top: px;
  right: 15px;
  padding: 0;
  margin: 0;
  background: none;
  padding-top: 20px;
}
/* Sub menu */
#cssmenu ul ul {
  display: none;
}
#cssmenu ul ul li {
  border: 1px solid #2A2A2A;
  border-top: 0;
}
#cssmenu ul ul a {
  padding: 10px;
  display: block;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 200;
  font-family: 'Source Sans Pro', sans-serif;
}
#cssmenu ul ul a:hover {
  color: gray;
}
#cssmenu ul ul li.odd {
  background: #2E2E2E;
}
#cssmenu ul ul li.even {
  background: #2E2E2E;
}</style>

<style>
    .class_slidshow2 {
   padding-left: 200px;
}
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  padding-left: 200px;
  }



<style>.slideshow {
    font-size: 30px;
    text-transform: uppercase;
    font-family: Arial, Verdana, sans-serif;
    color: #a81c11;
    display:inline;
    width: 80%; /* or dependent on what you like */
    float: left;

} 

.slideshow {
    float: right;
    display:inline;
    width: 20%; /* relative to width for introtekst */

}</style>
我还注意到，在所有浏览器上，当用户滚动时，背景都会移动。这会导致整个页面看起来迷失方向。我确实试过，位置：fix，但这没有效果

Jsfiddle：

将整个标记粘贴到：，这样您就可以看到我在说什么了。或者在浏览器中缩小JSFIDLE

这是背景的样式：位于JSFIDLE的第334行

<style>#headerWrapper {
    position: fixed;
    width: 200px;
    height: 100%;
    background-color: black; /* Omit to see body content scroll behind radius.  */
}
#headerBorder{
    border: black; 
    border-radius: 35px; 
    -moz-border-radius: 35px; 
    -webkit-border-radius: 35px; 
    overflow:hidden;
}
#headerContent {
    background-image:url("http://www.fimfiction-static.net/images/story_images/92970_r.png?1364253348");
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    opacity: 1;
}</style>
如何将内容放在屏幕顶部，在navmenu的右边，如果您希望内容显示在屏幕顶部，您需要将菜单向左浮动，并给出小于1100px的幻灯片宽度。接下来，如果您希望导航栏停止影响您的内容，则内容必须位于其自己的div中。我将向右浮动该div，而不是单独的幻灯片div。最后，要让导航栏与您一起滚动，您需要给它一个固定的位置，或者使用一些javascript。不管怎么说，似乎您需要使用列布局，所以我建议您查找它

以下是JSFIDLE：

我尽量不改变你的代码太多，所以css是在你的风格标签之一。但是就像我上面提到的，现在在你的幻灯片周围有一个div，包含内容类，在你的菜单周围有一个div，包含菜单占位符类

但需要关注的重要css部分有：

.content {
    width:800px;
    overflow:hidden;
}
.menu-placeholder {
    float:left;
    clear:left;
    min-height:250px;
    width:200px;

}
#cssmenu {
    position:fixed;
    top:150px;
}
您确实需要首先清理代码。你有嵌套的标签，这可能会影响浏览器处理样式的原因。啊，是的，我知道，我一直在等整个项目完成后才清理它。你还应该问一个问题，而不是几个问题。有些人可能能回答你的一两个问题，但不是全部，因此根本无法回答。明白。我只是觉得这样会更容易。