I’m putting some finishing touches on a new script I wrote, here. One of the last things I need to do is to get some Javascript I can use to make sure that when the user scrolls down the table, they can still see the first row (or whatever I put in a DIV at or near the top of each column). Can anyone please help for this?
Thank you.
Try Googling for:
CSS position
I think what you are after is position: relative and position: absolute
No, I was perhaps unclear. I want something similar to position: fixed that only kicks in once the div.class its the top of the page.
OK, no problem. my knowledge of JavaScript is limited.
Perhaps someone else could suggest a solution.
I guesstimate this is what your looking for…
Sticky JS Position Fixed at a Certain Point in Page
http://www.websitecodetutorials.com/code/jquery-plugins/sticky-js-position-fixed-at-certain-point-in-page.php
That look perfect, thanks! However, I’m having some trouble using it. I’m using xenForo, which should already have jquery installed. I used the following code, and nothing happened.
[code]
View the source code in the demo. There are some class names and possibly a id you need to add in the html as well.
Console Inspector says: jquery.sticky.js → NOT FOUND.
Indeed, that script isn’t in the root of your site.
So, check the path to jquery.sticky.js
Thanks! Not sure why an absolute path was necessary rather than a relative path, but got it to work now!
Hmm. Okay, still having some issues. The script “works” but I’m having issues with the end result, because the elements I’m trying to stick are not fixed dimensions. See here. Please help!
I didn’t said that an absolute path was necessary. I said that in your markup the link to the script file was pointing to a path in the root of the site and the file wasn’t hosted there.
But, now the link and the file are OK.
There are two options for a possible fix
#option 1
.sticky {
box-sizing: border-box;
height: 200px;
left: 0; /* add this in the CSS file */
}
#option2 (adjust according the following new rule in the media-queries directives)
.is-sticky table { /* add new CSS rule */
margin:0 auto;
width:100%;
max-width:844px;
}
Hmm. The first did not work; the sticky table expanded to full size and also did not stay in the same place.
The second one is closer, but (1) there are overlap problems before scroll and (2) the width/height is only correct when the window is full sized. Please see http://wearabletechforums.com/compare/specs/
Thanks.
As I said, for option 2, to fix the width/height issues in others windows sizes create media-queries rules for the .is-sticky table selector width according the site’s breakpoints.
Oh sorry. Overlooked that part. Ok
Not sure how that would solve the problem though, because the table width can’t scale down in steps; it scales down pixel by pixel. Is there something I’m missing?
This isn’t a breakpoint issue, unfortunately. There’s no break at this point; the main data simply resizes, whereas the header table does not.
Apparently there is an option that may be helpful, but I don’t know how to use it:
[quote]- getWidthFrom: Selector of element referenced to set fixed width of “sticky” element.
responsiveWidth: boolean determining whether widths will be recalculated on window resize (using getWidthfrom).Edit: Got it! Time to tweak. Thanks.
<script>
$(function(){
$(".sticky").sticky({topSpacing:0, getWidthFrom: "#comparisonSpecs", responsiveWidth: true});
});
</script>
I think I have it all figured out except for one bug: On small devices such as the iPhone, the table sometimes extends beyond the width of the “page” itself. This is not normally a problem, as one can simply scroll horizontally to see the rest of the table beyond the boundaries of the page. However, since this JS bases its calculations on the page width, the sticky element does not scroll horizontally correctly. It’s difficult to explain, but please take a look on a mobile device, held vertically. Thank you in advance.
I’ve resolved all problems except for one bug. I would appreciate any assistance. Usually when I load the page, it displays perfectly like so…
However, if I hit refresh, or sometimes if I arrive at the page via a link, it looks like this:
The sticky script works in both cases, however there’s obviously some sort of calculation error on load. The sticky part is sliding underneath the next table. Any idea what’s happening?
http://wearabletechforums.com/compare/specs/?vs=watch&vs=pebble&vs=activite
Thanks.
Set the value of the style property ‘position’ to ‘fixed’. (“position: fixed;”)
You can add it in your CSS, or as an attribute of your element.
