Reputation: 8256
I have this code to keep a heading element at the top of another element that scrolls.
It works perfectly in Firefox and Google Chrome however in IE it's excruciatingly jumpy. The code itself is very simple and I can't think how to potentially improve it.
In Chrome and Firefox the heading sits at the top permanently still all the time, however in IE it jumps around like a small child that got hold of the bag of sugar.
I can't change the HTML layout because of the JQueryUI
sortable
functionality I'm using
Anyway, here's the code:
http://jsfiddle.net/0va4dn0q/8/
$('.container').scroll( function() {
var fromTop = $(this).scrollTop(),
Header = $(this).find('.header');
Header.css('margin-top', fromTop + 'px');
});
$('.sortable').sortable({
connectWith: '.sortable',
placeholder: 'ui-state-highlight'
});
div {
width:300px;
}
.sortable {
float:left;
margin:3px solid red;
min-height:200px;
}
.container {
height:200px;
overflow-x:hidden;
overflow-y:auto;
position:relative;
cursor:move;
}
.header {
position:absolute;
top:0;
background-color:orange;
height:20px;
text-align:center;
line-height:20px;
}
.main {
padding-top:20px;
color:white;
background-color:black;
height:1000px;
}
.ui-state-highlight {
height:200px;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="sortable">
<div class="container">
<div class="header">Header 1</div>
<div class="main">hello<br/>hello<br/>hello<br/></div>
</div>
<div class="container">
<div class="header">Header 2</div>
<div class="main">bye<br/>bye<br/>bye<br/></div>
</div>
</div>
<div class="sortable">
<div class="container">
<div class="header">Header 3</div>
<div class="main">splurge<br/>splurge<br/>splurge<br/></div>
</div>
<div class="container">
<div class="header">Header 4</div>
<div class="main">lorem ipsum<br/>dolor<br/>sit<br/></div>
</div>
</div>
Upvotes: 4
Views: 2137
Reputation: 1335
You could just use position: fixed
and don't set the top
property so that it's fixed relatively.
like this:
https://jsfiddle.net/0va4dn0q/42/
Upvotes: 0
Reputation: 1717
Can we change the HTML structure INSIDE the sortable container? I really want to get the scrollbar inside the .main div, so it is next to the area that actually scrolls.
To do this, I created a new main-window class, gave it a height of 180px (200 - 20 for the header), moved the overflow from container, and removed the 20px padding from main, and it seemed to work:
$('.sortable').sortable({
handle: '.header',
connectWith: '.sortable',
placeholder: 'ui-state-highlight'
});
div {
width:300px;
}
.sortable {
float:left;
margin:3px solid red;
min-height:200px;
}
.container {
height:200px;
overflow-x:hidden;
position:relative;
}
.main-window {
height:180px;
overflow-x:hidden;
overflow-y:scroll;
}
.header {
cursor:move;
background-color:orange;
height:20px;
text-align:center;
line-height:20px;
}
.main {
color:white;
background-color:black;
height:1000px;
}
.ui-state-highlight {
height:200px;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="sortable">
<div class="container">
<div class="header">Header 1</div>
<div class="main-window">
<div class="main">hello<br/>hello<br/>hello<br/></div>
</div>
</div>
<div class="container">
<div class="header">Header 2</div>
<div class="main-window">
<div class="main">bye<br/>bye<br/>bye<br/></div>
</div>
</div>
</div>
<div class="sortable">
<div class="container">
<div class="header">Header 3</div>
<div class="main-window">
<div class="main">splurge<br/>splurge<br/>splurge<br/></div>
</div>
</div>
<div class="container">
<div class="header">Header 4</div>
<div class="main-window">
<div class="main">lorem ipsum<br/>dolor<br/>sit<br/></div>
</div>
</div>
</div>
And, besides the fact that the scrollbars are now below the headers and the headers now extend all the way to the next one, should work. You may or may not have some styling cleanup to do, but the scrollbars now act like you want them to without JavaScript.
Upvotes: 3