如何将元素移动到固定标题的正下方

How to move an element to just below a fixed header

本文关键字：标题正下方元素移动更新时间：2023-09-26

我试图将每个<li>移动到onClick()上的屏幕顶部，并且使用scrollIntoView();工作，但因为我的标题是固定的，<li>的一小部分位于标题下方。我如何滚动<li>到标题下方。

    <header></header>
<div id="wrapper">
   <ul>
       <li id='li1' onClick="moveup(1)"> blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
       </li>
         <li id='li2' onClick='moveUp(2)'> blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
       </li>
       <li id='li3' onClick='moveUp(3)'> blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
       </li>
        <li id='li4' onClick='moveUp(4)'> blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
       </li>
        <li id='li1' onClick='moveUp(1)'> blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
       </li>
       <li id='li5' onClick='moveUp(5)'> blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
           blah blah blah blah blah <br/>
       </li>
       </ul>   
</div> <!--end wrapper-->

css

header { position: fixed; top: 0; right: 0; left: 0; height: 50px; background-color: red; } #wrapper { width: 1000px; background-color: blue; height: 100%; margin: 0 auto; } #col1 { background-color: green; height: 100%; width: 80%; margin: 0 auto; } ul { margin: 0 auto; width: 500px; display: block; } li { display: block; background-color: yellow; height: 500px; width: 500px; margin-bottom: 5px; }
JAVASCRIPT

function moveup(x){ document.getElementById('li'+x).scrollIntoView(); }
http://jsfiddle.net/Jn74M/2/

谢谢。

在scrollIntoView()之后，按下50px，如下所示:

scrollBy(0, -50);

用onclick代替onClick您还定义了moveup函数，但调用了moveUp。
使用jQuery可以很容易地实现您需要的功能。检查这个http://jsfiddle.net/alekperos/Jn74M/3/
HTML
<header></header> <div id="wrapper"> <ul> <li id='li1'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> <li id='li2'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> <li id='li3'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> <li id='li4'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> <li id='li5'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> </ul> </div> 
JS
// on click of list element $('li').click(function(){ // scroll the window in the amount of position of current clicked list element // minus // the amount that corresponds to the height of the header $(window).scrollTop($(this).position().top - $('header').height()) })

我已经固定了你的例子，所以它的工作:[jsfiddle.net/t3go7b0u/4][1]我知道这个问题是旧的，你可能已经解决了它…但郑重声明。[2]

变化:
header { position: fixed; } $('#li' + x).smartScroll("start");
function moveUp(x){ // document.getElementById('li'+x).scrollIntoView(); // https://github.com/webdevelopers-eu/DNA-Smart-Scroll $('#li' + x).smartScroll("start"); }
header { position: sticky; top: 0; right: 0; left: 0; height: 50px; background-color: red; } *[onclick] { cursor: pointer; } *[onclick]:hover { outline: 2px solid orange; opacity: 0.5; } #wrapper { width: 1000px; background-color: blue; height: 100%; margin: 0 auto; } #col1 { background-color: green; height: 100%; width: 80%; margin: 0 auto; } ul { margin: 0 auto; width: 500px; display: block; } li { display: block; background-color: yellow; height: 500px; width: 500px; margin-bottom: 5px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.rawgit.com/webdevelopers-eu/DNA-Smart-Scroll/main/jquery.smartscroll.js"></script> <header></header> <div id="wrapper"> <ul> <li id='li1' onClick="moveUp(1)"> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> <li id='li2' onClick='moveUp(2)'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> <li id='li3' onClick='moveUp(3)'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> <li id='li4' onClick='moveUp(4)'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> <li id='li1' onClick='moveUp(1)'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> <li id='li5' onClick='moveUp(5)'> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> blah blah blah blah blah <br/> </li> </ul> </div> 
[1]: https://jsfiddle.net/t3go7b0u/4 [2]: https://github.com/webdevelopers-eu/DNA-Smart-Scroll

相关文章：
为什么竞争不能在离子中显示(隐藏在标题下方）(离子竞争不能正常工作）

JavaScript正则表达式来提取标题内容

将鼠标悬停在图像上，图像的不透明度和图像下方标题的颜色会发生变化..同样，当标题变成两行时，它会破坏格式

使用固定位置固定标题会导致内容在滚动过程中跳到标题下方

标题下方的标签在再次单击时消失，JavaScript不知道为什么

基本滑块:将标题放在图像下方

AngularJS在URL正下方显示列表

滚动固定标题下方的页面

全高视频 - 将内容放在浏览器窗口的正下方

如何在博客中的帖子标题下方显示广告，使其即使在博客的移动版上也能工作

在图像下方垂直和水平居中显示标题

用于创建标题并将文本放入其下方段落的循环

在导航栏正下方制作引导程序转盘

如何通过文本字段输入用户数据，然后在文本字段的正下方显示

匹配标题的正则表达式(例如:图书标题）

包含下拉选择(在正文中，而不是标题或筛选器中）的表分类器在IE中不起作用

twitter引导程序图像滑块不在标题下方

如何将元素移动到固定标题的正下方

将jquery对话框放置在点击事件的正下方

如何获取输入矩形左下侧正下方的x和y位置