如何在Dreamweaver中使用javascript将某个元素固定在某个点上 [英] How to make an element become fixed at a certain point using javascript in dreamweaver

查看：81
本文介绍了如何在Dreamweaver中使用javascript将某个元素固定在某个点上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我知道有很多类似于这个问题的问题，但是在Dreamweaver中似乎没有任何解决方案适用于我。任何人都可以提供JavaScript代码或我可以轻松插入Dreamweaver文件的内容吗？

我需要将代码应用于以下代码... 

 < div id =full-box> 
< center> 
< div id =box> 
< h1 class =full-box-text> header-text< / h1> 
< table style =padding-top：30pxclass =nav-box> 
< TR> < TD style =padding-right：25px; padding-left：25px; padding-bottom：20px; ALIGN = 中心 > 
< p class =nav-box-content>< a href =＃link1class =smoothScroll> link1< / a>< / p> 
< / TD> 
< TD style =padding-right：30px; padding-left：30px; padding-bottom：20px; ALIGN = 中心 > 
< p class =nav-box-content>< a href =＃link2class =smoothScroll> link2< / a>< / p> 
< / TD> 
< / TR> 
< TR> < TD style =padding-right：30px; padding-left：30px; ALIGN = 中心 > 
< p class =nav-box-content>< a href =＃link3class =smoothScroll> link3< / a>< / p> 
< / TD> 
< TD style =padding-right：30px; padding-left：30px; ALIGN = 中心 > 
< p class =nav-box-content>< a href =＃link4class =smoothScroll> link5< / a>< / p> 
< / TD> 
< / TR> 
< / table> 
< / div> 
< / center> 
< / div> 
 
 
 
 
 
＃full-box {
 z-index：100; 
 padding-top：700px; 
 padding-bottom：200px; 
背景：无; 
} 
 
 #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-size：25px; 
 line-height：25px; 
颜色：＃000; 
} 
 
 .nav-box a：hover {
 text-decoration：none; 
字体家族：流沙之光; 
 font-size：25px; 
 padding-bottom：5px; 
 line-height：25px; 
颜色：＃000; 
 border-bottom：2px solid＃000; 
} 
 
 .nav-box-content {
 display：inline; 
 list-style-type：none; 
 padding-left：10px; 
 padding-right：10px;


解决方案

你的代码的头或尾，但我确实得到了你以后的东西。阅读 README.md 了解如何获取滚动锚点停在预定的目的地。



Plunker



摘要
$ b 

 <！doctype html>< html>< head> < meta charset =utf-8> <标题> 35951624< /标题> < meta name =viewportcontent =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'/> <风格> / * Core ~~~~~~~~~~~~~~~ * / html {box-sizing：border-box; font：300 16px / 1.428'Quicksand';身高：100vh;宽度：100vw; } *，*：before，*：{box-sizing：inherit;保证金：0;填充：0; } body {position：relative; font-size：1rem; line-height：1;身高：100vh;宽度：100vw; overflow-x：hidden; overflow-y：scroll; -webkit-font-smoothing：antialiased; -moz-osx-font-smoothing：grayscale;背景：＃000;颜色：#eee;显示：flex; flex-flow：立柱; align-items：center; } h1，h2，h3，h4，h5，h6，legend {font-variant：small-caps; margin-bottom：15px;颜色：＃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;宽度：25em;身高：自动; margin：20px 0; } a {color：＃Fc0;文字修饰：无; margin：10px 20px;显示：inline-block; } a：hover {color：#CCC; }按钮{font：inherit;行高：1.5; padding：1px 3px; border-radius：8px; border：1px solid＃fc2; }＃top-box {position：relative; top：90px; }＃head-box {position：fixed; top：0;左：0;正确：0;宽度：100％; border-bottom：3px outset #bbb; height：80px; z-index：11;背景：＃000; text-align：center; }＃foot-box {position：relative;底部：0;左：0;正确：0;宽度：100％; border-top：3px outset #bbb; text-align：center; height：80px; z-index：11;背景：＃000;保证金：0汽车; }＃main-box {width：100％;身高：100％;保证金：0汽车;位置：绝对; top：100px; } .sec-box {width：92％;身高：50em;边框：5px脊＃999; border-radius：12px; margin：20px auto; } nav li {display：inline-block; } a.anchor {display：block;身高：90px; margin-top：-90px;知名度：隐藏; }< / style>< / head>< body> < header id =head-box> < h1> Loooooooooooooooooooooooooooonnnngggg标题< / h1> < nav class =nav-box> < UL> < li>< a href =＃top-boxclass =smoothScroll>第1部分< / a> < /锂> < li>< a href =＃secIIclass =smoothScroll>第2部分< / a> < /锂> < li>< a href =＃secIIIclass =smoothScroll>第3部分< / a> < /锂> < li>< a href =＃secIVclass =smoothScroll>第4部分< / a> < /锂> < / UL> < / NAV> < /报头> < a id =top-boxclass =anchor>< / a> < main id =main-box> < h3>第I部分< / h3> < section id =sec1class =sec-box> < /节> < a id =secIIclass =anchor>< / a> < h3>第II部分< / h3> < section id =sec2class =sec-box> < /节> < a id =secIIIclass =anchor>< / a> < h3>第III部分< / h3> < section id =sec3class =sec-box> < /节> < a id =secIVclass =anchor>< / a> < h3>第IV节< / h3> < section id =sec4class =sec-box> < /节> < footer id =foot-box> < a href =＃top-boxstyle =font-size：50px; text-align：center>

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



 解决方案 
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">
                        
这篇关于如何在Dreamweaver中使用javascript将某个元素固定在某个点上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

                        
                    

                    

                        查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆