StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POLoading a long page with multiple backgrounds based on vertical scroll value in jQuery?
primarykey
Id
6658432
data
AcceptedAnswerId
6740148
AnswerCount
3
ClosedDate
CommentCount
3
CommunityOwnedDate
CreationDate
2011-07-12T00:58:04.627
FavoriteCount
1
LastActivityDate
2011-07-18T22:22:11.623
LastEditDate
LastEditorUserId
0
OwnerUserId
467760
ParentId
0
PostTypeId
1
Score
1
ViewCount
2210
LastEditorDisplayName
text
Body
The design I've been given to work with is 960px wide by around 7000px tall, cut into five vertically-stacked segments at arbitrary points. There's a fixed-placed sidebar that scrolls to each segment, depending on which navigation link is clicked. Atop this are a bunch of sliders, transparent PNGs, headlines and paragraphs, predominantly positioned in a relative fashion. I need to ultimately do two things: <ol> <li>Hide the corresponding quick-nav links in the sidebar until its related segment's background image has loaded</li> <li>Load (and ideally fade in) the transparent PNGs in each section as needed -- the user scrolls between two vertical scroll values and stops for a second, causing that section's transparent PNGs to then load and fade in.</li> </ol> I'm currently using <a href="http://scripterlative.com/files/softscroll.htm" rel="nofollow">softscroll.js</a> to achieve a smooth scrolling effect for when the sidebar links are clicked (thus scrolling to the related anchors). Thus, lazy loading techniques that begin to load images as you scroll by won't work -- if I click the last link in the sidebar nav and it scrolls me to the bottom, I don't want every image between the bottom segment and the top loading as a result. While I'll need to figure out point 1 sooner rather than later, I'm more interested in the second question. How would one use jQuery to load images inside a certain element if and only if the user has paused between two specific vertical scroll values? Thank you! (BTW, please don't respond with <a href="http://www.appelsiini.net/projects/lazyload" rel="nofollow">appelsiini's lazyload jQuery plugin</a>. It's unsupported by the developer and doesn't appear to work in modern browsers. Thanks!)
Tags
<javascript><jquery><html><jquery-plugins><lazy-loading>
Title
Loading a long page with multiple backgrounds based on vertical scroll value in jQuery?
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USaendrew
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. PL
 singulars
 LinkTypeLinkTypeId
 LTLinked
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
2. PO
 singulars
 PostTypePostTypeId
 PTAnswer
3. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 POLoading a long page with multiple backgrounds based on vertical scroll value in jQuery?
 UserUserId
 USaendrew
 VoteTypeVoteTypeId
 VTBountyStart
2. VO
 singulars
 PostPostId
 POLoading a long page with multiple backgrounds based on vertical scroll value in jQuery?
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
3. VO
 singulars
 PostPostId
 POLoading a long page with multiple backgrounds based on vertical scroll value in jQuery?
 UserUserId
 USZander
 VoteTypeVoteTypeId
 VTFavorite
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.