How to make an element become fixed at a certain point using javascript in dreamweaver

问题

I know there are many questions similar to this one however none of the solutions seem to be working for me in Dreamweaver. Would anyone be able to provide a JavaScript code or something that I can easily insert into a Dreamweaver file?
The code that I need to apply it to is below...

<div id="full-box">
<center>
<div id="box">
<h1 class="full-box-text">header-text</h1>
<table style="padding-top:30px" class="nav-box">
<TR> <TD style="padding-right: 25px; padding-left: 25px; padding-bottom: 20px;" ALIGN="center">
  <p class="nav-box-content"><a href="#link1" class="smoothScroll">link1</a></p>
  </TD>
  <TD style="padding-right: 30px; padding-left: 30px; padding-bottom: 20px;" ALIGN="center">
  <p class="nav-box-content"><a href="#link2" class="smoothScroll">link2</a></p>
  </TD>
</TR>
<TR> <TD style="padding-right: 30px; padding-left: 30px;" ALIGN="center">
  <p class="nav-box-content"><a href="#link3" class="smoothScroll">link3</a></p>
  </TD>
  <TD style="padding-right: 30px; padding-left: 30px;" ALIGN="center">
  <p class="nav-box-content"><a href="#link4" class="smoothScroll">link5</a></p>
  </TD>
</TR>
</table>
</div>
</center>
</div>





#full-box {
z-index: 100;
padding-top: 700px;
padding-bottom: 200px;
background: none;
}

#box {
width: 400px;
height: 200px;
background-color: #fff;
padding-bottom: 20px;
}

.full-box-text {

padding-bottom: 10px;
border-bottom: 1px solid #000;
width: 300px;
}

.nav-box a {
text-decoration: none;
font-family: "quicksand light";
font-size: 25px;
line-height: 25px;
color: #000;
}

.nav-box a:hover {
text-decoration: none;
font-family: "quicksand light";
font-size: 25px;
padding-bottom: 5px;
line-height: 25px;
color: #000;
border-bottom: 2px solid #000;
}

.nav-box-content {
display: inline;
list-style-type: none;
padding-left: 10px;
padding-right: 10px;
}

回答1:

Sorry I couldn't make heads or tails of your code, but I did get what you were after. Read the README.md on how to get scroll anchors to stop at intended destination.

Plunker

Snippet

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>35951624</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
  <link href='https://fonts.googleapis.com/css?family=Quicksand:300' rel='stylesheet' />
  <style>
    /* Core~~~~~~~~~~~~~~~*/
    html {
      box-sizing: border-box;
      font: 300 16px/1.428'Quicksand';
      height: 100vh;
      width: 100vw;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
    }
    body {
      position: relative;
      font-size: 1rem;
      line-height: 1;
      height: 100vh;
      width: 100vw;
      overflow-x: hidden;
      overflow-y: scroll;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background: #000;
      color: #eee;
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    legend {
      font-variant: small-caps;
      margin-bottom: 15px;
      color: #Fc3;
      text-align: center;
    }
    h1 {
      font-size: 1.5rem;
    }
    h2 {
      font-size: 1.4rem;
    }
    h3 {
      font-size: 1.3rem;
    }
    legend {
      font-size: 1.35rem;
    }
    p {
      margin: 0 5px 15px;
    }
    img {
      display: inline-block;
      width: 25em;
      height: auto;
      margin: 20px 0;
    }
    a {
      color: #Fc0;
      text-decoration: none;
      margin: 10px 20px;
      display: inline-block;
    }
    a:hover {
      color: #CCC;
    }
    button {
      font: inherit;
      line-height: 1.5;
      padding: 1px 3px;
      border-radius: 8px;
      border: 1px solid #fc2;
    }
    #top-box {
      position: relative;
      top: 90px;
    }
    #head-box {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      border-bottom: 3px outset #bbb;
      height: 80px;
      z-index: 11;
      background: #000;
      text-align: center;
    }
    #foot-box {
      position: relative;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      border-top: 3px outset #bbb;
      text-align: center;
      height: 80px;
      z-index: 11;
      background: #000;
      margin: 0 auto;
    }
    #main-box {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      position: absolute;
      top: 100px;
    }
    .sec-box {
      width: 92%;
      height: 50em;
      border: 5px ridge #999;
      border-radius: 12px;
      margin: 20px auto;
    }
    nav li {
      display: inline-block;
    }
    a.anchor {
      display: block;
      height: 90px;
      margin-top: -90px;
      visibility: hidden;
    }
  </style>
</head>

<body>

  <header id="head-box">
    <h1>Loooooooooooooooooooooooooooonnnngggg Title</h1>

    <nav class="nav-box">
      <ul>
        <li><a href="#top-box" class="smoothScroll">Section 1</a>
        </li>
        <li><a href="#secII" class="smoothScroll">Section 2</a>
        </li>
        <li><a href="#secIII" class="smoothScroll">Section 3</a>
        </li>
        <li><a href="#secIV" class="smoothScroll">Section 4</a>
        </li>
      </ul>
    </nav>
  </header>
  <a id="top-box" class="anchor"></a>
  <main id="main-box">
    <h3>Section I</h3>
    <section id="sec1" class="sec-box">

    </section>
    <a id="secII" class="anchor"></a>
    <h3>Section II</h3>
    <section id="sec2" class="sec-box">

    </section>
    <a id="secIII" class="anchor"></a>
    <h3>Section III</h3>
    <section id="sec3" class="sec-box">

    </section>
    <a id="secIV" class="anchor"></a>
    <h3>Section IV</h3>
    <section id="sec4" class="sec-box">

    </section>


    <footer id="foot-box">
      <a href="#top-box" style="font-size: 50px; text-align:center">🔝</a>
    </footer>
  </main>
</body>

</html>

来源：https://stackoverflow.com/questions/35951624/how-to-make-an-element-become-fixed-at-a-certain-point-using-javascript-in-dream

标签

javascript

html

dreamweaver