logo标签列表

可拖动的固定元素内的固定元素问题

javascripthtmlcssjquery-ui
4

我有一个可拖动的固定元素，并且我想在其中保留另一个具有从右到左位置过渡效果的固定元素。我尝试使用JS计算左侧和顶部位置，但是在过渡时遇到了问题。 我该如何将此元素（橙色菜单）保留在可拖动的div（蓝色）内并显示和隐藏（部分）？

$('#fixed-draggable-div').draggable();
#fixed-draggable-div {
  position: fixed;
  top: 50px;
  left: 35%;
  width: 200px;
  height: 300px;
  background: CornflowerBlue;
  overflow-y: scroll;
  padding: 0.5em 1em;
}

#fixed-menu {
  width: 100px;
  background: DarkOrange;
  position: fixed;
  right: -90px;
  top: 40%;
  transition: 1s right;
}

#fixed-menu:hover {
  right: 0;
  transition: 1s right;
}
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum semper molestie arcu. Donec sem sapien, finibus tempor dapibus ut, bibendum vel nunc. Curabitur nunc nulla, ultrices a dictum sed, mattis a risus. Praesent malesuada auctor nisl et sollicitudin. Nunc turpis erat, commodo et lorem consequat, egestas sollicitudin nibh. Aliquam rutrum sapien varius consequat sodales. Vestibulum at tempor mi.</p>

  <p>Pellentesque blandit arcu metus, id imperdiet urna luctus id. Sed ipsum magna, sodales quis mauris eu, sollicitudin tempus diam. Integer tristique est sit amet orci maximus lobortis. Nam porttitor ultrices bibendum. Vestibulum blandit lacinia faucibus. Morbi nulla sapien, maximus at ex tempor, consectetur aliquam sem. Sed feugiat rutrum est ac porttitor. Aliquam gravida, diam nec rhoncus vehicula, velit justo porta sapien, eget fringilla libero justo vel velit. Duis ultrices rutrum gravida.</p>

  <p>Cras quis pharetra turpis. Integer sit amet nunc aliquam, iaculis diam quis, vestibulum enim. Praesent a pulvinar lacus. Nunc in mauris sed tortor consequat volutpat fermentum sed nisl. Cras aliquam lectus mauris, nec ultricies tellus tincidunt vel. Fusce dictum in enim vel sollicitudin. Nam imperdiet molestie dignissim. Suspendisse eleifend maximus orci, eget fringilla enim volutpat et. Quisque erat erat, mollis in tellus ac, rhoncus condimentum ipsum.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum semper molestie arcu. Donec sem sapien, finibus tempor dapibus ut, bibendum vel nunc. Curabitur nunc nulla, ultrices a dictum sed, mattis a risus. Praesent malesuada auctor nisl et sollicitudin. Nunc turpis erat, commodo et lorem consequat, egestas sollicitudin nibh. Aliquam rutrum sapien varius consequat sodales. Vestibulum at tempor mi.</p>

  <p>Pellentesque blandit arcu metus, id imperdiet urna luctus id. Sed ipsum magna, sodales quis mauris eu, sollicitudin tempus diam. Integer tristique est sit amet orci maximus lobortis. Nam porttitor ultrices bibendum. Vestibulum blandit lacinia faucibus. Morbi nulla sapien, maximus at ex tempor, consectetur aliquam sem. Sed feugiat rutrum est ac porttitor. Aliquam gravida, diam nec rhoncus vehicula, velit justo porta sapien, eget fringilla libero justo vel velit. Duis ultrices rutrum gravida.</p>

  <p>Cras quis pharetra turpis. Integer sit amet nunc aliquam, iaculis diam quis, vestibulum enim. Praesent a pulvinar lacus. Nunc in mauris sed tortor consequat volutpat fermentum sed nisl. Cras aliquam lectus mauris, nec ultricies tellus tincidunt vel. Fusce dictum in enim vel sollicitudin. Nam imperdiet molestie dignissim. Suspendisse eleifend maximus orci, eget fringilla enim volutpat et. Quisque erat erat, mollis in tellus ac, rhoncus condimentum ipsum.</p>
  
  <div id="fixed-draggable-div">
    <h3>Draggable element</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum semper molestie arcu. Donec sem sapien, finibus tempor dapibus ut, bibendum vel nunc. Curabitur nunc nulla, ultrices a dictum sed, mattis a risus. Praesent malesuada auctor nisl et sollicitudin. Nunc turpis erat, commodo et lorem consequat, egestas sollicitudin nibh. Aliquam rutrum sapien varius consequat sodales. Vestibulum at tempor mi.</p>
  <p>Pellentesque blandit arcu metus, id imperdiet urna luctus id. Sed ipsum magna, sodales quis mauris eu, sollicitudin tempus diam. Integer tristique est sit amet orci maximus lobortis. Nam porttitor ultrices bibendum. Vestibulum blandit lacinia faucibus. Morbi nulla sapien, maximus at ex tempor, consectetur aliquam sem. Sed feugiat rutrum est ac porttitor. Aliquam gravida, diam nec rhoncus vehicula, velit justo porta sapien, eget fringilla libero justo vel velit. Duis ultrices rutrum gravida.</p>
    <ul id="fixed-menu">
      <li>Element 1</li>
      <li>Element 1</li>
      <li>Element 1</li>
    </ul>
  </div>
  
</body>  
</html>

http://jsfiddle.net/6pwn3wyp/

2个回答
2

这可能解决了你的问题，但你需要改变偏移量的值。我在固定元素的滚动事件中将其偏移设置为顶部。此外 - 你还需要将你的 #fixed-menu 的 position 改为 absolute。 Fixed选项适用于整个窗口。

CSS - 

#fixed-menu {
  width: 100px;
  background: DarkOrange;
  position: absolute; //this line
  right: -90px;
  top: 40%;
  transition: 1s right;
}

JQuery - 

$('#fixed-draggable-div').scroll(function(){
   $('#fixed-menu').css(
      'top', $('#fixed-draggable-div').scrollTop()+100);
});

Fiddle

0

你不能在另一个固定元素内使用两个固定元素。固定元素是相对于视口的。你只需要将固定菜单的位置改为绝对定位，并可选地更改父级 div 的 overflow-x: hidden。

#fixed-draggable-div {
      ..
      overflow-x: hidden; /* Optional */
      ..
}

 #fixed-menu {
      ..
      position: absolute;
      ..
}

这是更新后的代码片段。

http://jsfiddle.net/6pwn3wyp/3/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接