Databases
StackOverflow2013
Postsdbo
POAnimating fixed navigation while scrolling - bug
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAnimating fixed navigation while scrolling - bug
    primarykey
    data
    text
    <p>i'm currently working on a website, which should have a similar functionality like this one: <a href="http://nzopera.com/2013/the-flying-dutchman" rel="nofollow noreferrer">http://nzopera.com/2013/the-flying-dutchman</a></p> <p>You can see the effect i'm talking about, if you scroll down on the page above. 1. ) The top and bottom padding of the header shrinks and after that you literally "scroll" the header out of your viewport. 2.) If you keep scrolling down a bit (to the content area) and then scroll up again, the navigation becomes visible.</p> <p>I haven't implemented the second effect yet, because i want to solve a problem with the first one before. I've created a quick fiddle with my current status: <a href="http://jsfiddle.net/FN8D/1/embedded/result/" rel="nofollow noreferrer">http://jsfiddle.net/FN8D/1/embedded/result/</a> The HTML markup is pretty simple:</p> <pre><code>&lt;header&gt;&lt;!- HEADER CONTENT / NAVIGATION -&gt;&lt;/header&gt; &lt;div&gt;&lt;!- MAIN CONTENT / NAVIGATION -&gt;&lt;/div&gt; </code></pre> <p>I'm not sure if i have to put my JS Code in here, because it is pretty long. If i do have to, please tell me. You can have a look at the JS in the fiddle link though. What the JS does, is checking the scroll direction and calling the function, which calculates the CSS values (based on the current scroll positon). The function has several parameters:</p> <pre><code>startValue : Initial CSS value endValue : The CSS value to animate to distance : After which distance scrolled (in px) should the "animation" be over? initScroll : When (in px) should the "animation" start? </code></pre> <p>Currently the first effect (see above) mostly works, but when you compare it to the one in the link above it has some issues: 1.) All the values in my code are hard coded. Do you have any ideas how to do it different / better? E.g. the values for the padding are hardcoded in JS. So if i change the "padding" in the CSS file, i'll have to change it in the JS file as well. Or the "padding-top"-value on the "body" is hard-coded, but it is dependent on the initial height of the header. So is the "top"-value of the header (to show or hide the header), which is dependent on the height of the header (without the initial large padding). – To solve at least some of these hard coded values i thought of using data-attributes (at least start and end value) in the HTML, so at least i don't have to change anything in the JS. Do you think this could work? Though i don't have a solution for the "top"-value to show and hide the header. It somehow has to be dependent on the height (after the padding shrinks) of the header. And i don't have a solution for all the other remaining hard-coded values yet.</p> <p>2.) You may have noticed a small white gap, when you scroll back to the top after the scrolled down. For me this is the most important issue right now, because i really don't know how to fix it at all. Sometimes it also happens that the white gap (screenshot attached<img src="https://i.stack.imgur.com/hF0hc.jpg" alt="Small Gap while scrolling back to the top">) is pretty big, because the "animation" doesn't finish properly. In comparision to nzopera.com my code seems pretty slow (to me) and the animation is not as smooth. I think that is why the small white gap appears. I could of course change the background to black (same color as header) to "remove" the white gap, but this won't work, because the content background-color should be white and there won't be a large header image on every page. There needs to be a proper solution to fix that, nzopera.com does it as well somehow. Any help would be really appreciated.</p> <p>So far that's all. I properly have more questions as soon as i start implementing the second effect ;) Thanks in advance. Just for your information: As you might see in my code, i'm not good in JS at all. If you have any other suggestion to improve anything, please tell me... still learning :)</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDaniel
    1. USDaniel
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAnimating fixed navigation while scrolling - bug
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POAnimating fixed navigation while scrolling - bug
      1. USMoe Assaad
      1. VTFavorite
    1. COhave you thought of using SMINT for this? it could save you some time: http://www.outyear.co.uk/smint/
      singulars
      1. POAnimating fixed navigation while scrolling - bug
      1. USunderscorePez
 

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.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload