1

我在顶部有一个固定导航，当我单击锚链接将我带到页面中的某个部分时，我希望它显示在可见空间中。

当用户单击导航链接以转到页面中的特定部分时，如何使内容显示在导航下方（而不是后面）？

我愿意将 jquery 与 css 一起使用

可以在 jsfiddle 中查看演示

演示

代码

<div id="wrapper">

    <div id="branding">
    <h1>Branding</h1>
    <ul id="mainNav"> 
    <li class="first"><a href="#">Home</a></li> 
    <li><a href="#link1">link1</a></li> 
    <li><a href="#link2">link2</a></li> 
    <li><a href="#link3">link3</a></li> 

    </ul> 

    </div> 

    <div id="content"> 



        <div id="form-b">

        <form id="comments_form" action="#" method="post">

    <fieldset>
      <legend>Your Contact Details  Link1 <a name="link1"></a> </legend>

      <p>
      <label for="author">Name: <span class="required">(Required)</span></label>
      <input name="author" id="author" type="text" />
      </p>

      <p>
      <label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span></label>
      <input name="email" id="email" type="text" />
      </p>

      <p>
      <label for="url">Web Address:</label>
      <input name="url" id="url" type="text" />
      </p>
    </fieldset>


    <fieldset>
      <legend>Your Contact Details  Link 2<a name="link2"></a> </legend>
      <p>
      <label for="author">Name: <span class="required">(Required)</span></label>
      <input name="author" id="author" type="text" />
      </p>

      <p>
      <label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span></label>
      <input name="email" id="email" type="text" />
      </p>

      <p>
      <label for="url">Web Address:</label>
      <input name="url" id="url" type="text" />
      </p>
    </fieldset>
    <fieldset>
      <legend>Your Contact Details  Link 3<a name="link3"></a></legend>
      <p>
      <label for="author">Name: <span class="required">(Required)</span></label>
      <input name="author" id="author" type="text" />
      </p>

      <p>
      <label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span></label>
      <input name="email" id="email" type="text" />
      </p>

      <p>
      <label for="url">Web Address:</label>
      <input name="url" id="url" type="text" />
      </p>
    </fieldset>

    <fieldset>
      <legend>Your Contact Details  </legend>
      <p>
      <label for="author">Name: <span class="required">(Required)</span></label>
      <input name="author" id="author" type="text" />
      </p>

      <p>
      <label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span></label>
      <input name="email" id="email" type="text" />
      </p>

      <p>
      <label for="url">Web Address:</label>
      <input name="url" id="url" type="text" />
      </p>
    </fieldset>

    <fieldset id="submit-b">
      <legend>  </legend>
    <div class="wrap">  
      <p>
    <input id="submit" class="submit" name="submit" type="submit"/>
    </p>
    </div>
    </fieldset>

    </form>


        </div>

    </div> 



    <div id="footer">
    <p>Footer</p>
    </div>


    </div>

CSS

<!--

/* Pretty Stuff
================================== */

/* Zero down margin and paddin on all elements */
* {
  margin: 0;
  padding: 0;
}

body {
  font: 92.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;

}

h1 {
  font-size: 2.4em;
  font-weight: normal;
}

h2 {
  font-size: 2.0em;
  font-weight: normal;
}

p, li {
  font-size: 1.4em;
}

h1, h2, p {
  margin: 1em 0;
}

#branding h1 {
  margin: 0;
}

#wrapper {
  background-color: #fff;
}

#branding {
   width:100%;  
}
#branding {

  background-color:#b0b0b0;
  padding: 20px 20px 20px 0 ;

  /** for fixed postion **/
          position:fixed;
         z-index:99998;
             /*Making sure it sticks to left of window in IE7*/
              left:0;
             /*Change to reflect height of your header.
             Remember to accomadate for padding!*/
             height:100px;
}

#form-b {
 /* height: 500px;
    overflow: auto;
    position: fixed;
    top: 164px;
    width: 98%;
*/
  margin-top:150px;
}
#mainNav {
  list-style: none;
  background-color:#eee;
}

#footer {
  background-color:#b0b0b0;
  padding: 1px 20px;
}

/* The Core Technique
================================= */

body {
  text-align: center; 
  min-width: 1260px;
}

#wrapper {
  width: 100%; 
  margin: 0 auto; 
  text-align: left; 
}


#content { 
  width: 100%;
  float: right; 
}

#mainNav li{ 
/*  width: 180px; 
  float: left;  */
  display:inline;

} 
#submit-b {
   /* border: 0px solid red;
    bottom: 77px;

    position: fixed;
    text-align: cemter;
    width: 100%;
 */
 width:100%;
        float:left;
}
#submit-b {
        position:fixed;
        bottom:0;
        z-index:999999;
    }
.wrap {
        position:relative;
        margin:0 auto;
               /*replace 900px with your width*/
        width:900px;
    }

#footer { 
  clear: both; 
} 

/* Add some padding 
================================== */

#mainNav {
  padding-top: 20px;
  padding-bottom: 20px;
   position: fixed;
    width: 100%;
}

#mainNav * {
  padding-left: 20px;
  padding-right: 20px;
}

#mainNav * * {
  padding-left: 0;
  padding-right: 0;
}

#content * {
  padding-right: 10px;
}

#content * * {
  padding-right: 0;
}

-->



/* fieldset styling */
fieldset {
  margin: 1em 0 0 0; /*  space out the fieldsets a little*/
  padding: 1em;
  border : 1px solid #ccc;
  background-color:#F5F5F5
}

/* legend styling */
legend {
  font-weight: bold;
}

form p {
  position: relative;
  width: 100%;
}

/* style for  labels */
label {
  float: left;
  width: 10em;
}

#remember-me label {
  width: 4em;
}

/* style for required labels */
label .required {
  font-size: 0.83em;
  color:#760000;
}

/* style error messages */
label .feedback {
  position: absolute;
  margin-left: 11em;
  left: 200px;
  right: 0;
  font-weight: bold;
  color:#760000;
  padding-left: 18px;
  background: url(images/error.png) no-repeat left top;
}

/* :KLUDGE: Explicitly set the width for IE6- */
* html .feedback{
  width: 10em;
}

input {
  width: 200px;
}

input[type="text"], textarea {
  border-top: 2px solid #999;
  border-left: 2px solid #999;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

input.radio, input.checkbox, input.submit {
  width: auto;
}

/* style form elements on focus */
input:focus, textarea:focus {
  background: #ffc;
}

input.radio {
  float: left;
  margin-right: 1em;
}

textarea {
  width: 300px;
  height: 100px;
}

/* Date of Birth form styling */

#monthOfBirthLabel, #yearOfBirthLabel {
  text-indent: -1000em;
  width: 0;
}

#dateOfBirth {
  width: 3em;
  margin-right: 0.5em;
}

#monthOfBirth {
  width: 10em;
  margin-right: 0.5em;
}

#yearOfBirth {
  width: 5em;
}

/* Color form styling */
#favoriteColor {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

#favoriteColor h2 {
  width: 10em;
  float: left;
  font-size: 1em;
  font-weight: normal;
}

#favoriteColor div {
  width: 8em;
  float: left;
}

#favoriteColor label {
  /*width: 3em;*/
  float: none;
  display: inline;
}
4

2 回答 2

0

您将无法使用现有的设置来执行此操作。固定元素将充当所有现代浏览器视口上的屏幕。

在我看来，您有两个选择：

1）像这样连接一些jQuery：

`$('div#branding ul li a').click (function (e) {
    e.preventDefault();
    var location = $($(this).attr('href')).offsetParent();
    $('div.content').scrollTop(location.top);
});`

如果你打算走这条路，我强烈建议将 id 添加到与名称相同的锚补充中。如果这不可能，您需要将该代码块中的选择器更改为

$('s[name=' + $(this).attr('href').substr(1) + ']')

2) 将您的固定标题更改为绝对标题，将 div.content 绝对定位在其正下方，并将 doc.content 上的溢出-y 设置为“自动”

编辑

这是一个工作示例

这是我添加的javascript。这依赖于您向那些匹配其当前name属性的链接添加一个 ID：

$('ul#mainNav li a').click(function (e) {
    e.preventDefault();
    if($(this).attr('href') !== '#'){
        var location = $($(this).attr('href')).offset().top - 150; /* For your header height, subtract 150 or whatever it ends up being */
        $('html, body').animate({scrollTop: location}, 600);
    } else {
        $('html, body').animate({scrollTop: 0}, 600);
    }
});
于 2013-03-07T23:49:30.320 回答
0

您的问题是指向锚点的链接会自动滚动页面，直到该锚点位于窗口顶部。出于这个原因，将粘性导航与基于锚的链接结合起来并不是一个好主意，但您可以通过移动 HTML 中的锚并调整一些 CSS 来使其工作。因此，例如，如果您将 link2 的锚点放在第一个字段集中的某个位置，您可以让它正确排列，但这不是一个干净的做法。

于 2013-03-07T23:51:06.997 回答