Question

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

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

我愿意使用jssery和css

可以在jsfiddle

中查看演示

CODE

<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;
}

Answer 1

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

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

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上将overflow-y设置为“auto”

修改

Here's a working example

这是我添加的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); } });

Answer 2

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

Jquery：如何在单击锚点链接时在导航栏下方显示内容？

2 个答案: