I have a draggable fixed element and I would like keep inside it another fixed element with position transition effect from right to left. I tried calculate the left and top position with JS but I had problems with the transition. How could I keep this element (orange menu) inside the draggable div (blue) and show and hide(partially)?
$('#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>This may solve your problem, but you have to change the offset value. I change the offset to top at scrolling event of your fixed element. Further - you have to change the positionof your #fixed-menuto absolute. Fixed option applies to the whole window.
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);
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments