I'm looking to produce the effect that is on this page: http://jonrohan.me/guide/css/creating-triangles-in-css/ - but with just CSS, no JavaScript (this would be trivial with JavaScript).
The effect I'm talking about is as follows:
Initially you see both the page header and the article title.
when you scroll the page header disappears.
The article title becomes fixed to the top of the page, so you always see it as you scroll.
The best I've managed to achieve so far is this:
http://jsfiddle.net/nottrobin/2FSvx/
But I don't like the duplication of the <nav> inherent in my solution.
Does anyone have any clever CSS/3 techniques they can think of to make it so that when you scroll down and the <header> disappears, the <nav> would naturally ride up to the top of the page?
Your example has some issues, if I scroll the webpage down or up sometimes the two navs overlap and the content is displayed twice and overlapping.
As far as I know, there is no such technique to obtain the same effect using only CSS, JS is required.
You can position elements using CSS only in a static way (normal page flow), fixed way (relative to browser window), or absolute/relative (relative to the nearest parent with a position set to relative).
You cannot "listen" to a scroll event like you would do with JavaScript, hence you cannot position an element relative to the amount of scrolling, nor change its position value in real time, because you will need JavaScript even for this.
CSS is a presentational markup language, properties you assign to elements using CSS rules cannot be changed on an event-basis.
You could do something like you did, but that means more markup language, more CSS and more maintenance difficulties.
You should use JS to optimize the user's experience, if a user has JS disabled, he/she will see the normal page behavior, otherwise the nav element will remain still, like all other websites do.
Related
I designed a page with a semi-transparent navigation bar at the top which is fixed to the top by using position: sticky & top: 0. It looks cool & works nice until I jump to a certain object by using the fragment in the URI (/page#obj-id) because it jumps so the target is directly at the top, semi-hidden by the navigation bar. So each time I need to scroll further down to be able to interact with the target, which is not good.
I don't want to modify the HTML structure (like defining a hidden object to be target slightly above) because the site should stay structurally correct & easy to parse.
I don't want to add JavaScript either (only if necessary) because the site should be possible to use without.
So I would like to "kind of" configure a margin to the top for the jump.
I tried to surround all the content aside the navigation bar in its own div to be able to define such a margin, but it had no effect to the jump itself. I could make this inner div scrollable and define body unscrollable, but then the scrollbar wouldn't look good either as it doesn't use the full space on the side.
TL;DR: I want a solution to How can I jump to a point slightly above the fragment identifier? but (mostly) without changing the main HTML structure & without introducing JavaScript.
You can use scroll-margin-top: (height of header); and add it to the element you link to with your anchor tag
I saw the Google Material Design website and was amazed by the change of color of the left, sticky "speech bubble"-image when you scroll down.
I am trying to understand the concept but Google's code is huge and somewhat confusing...
I think there are actually two images, but I cant recreate it just with different z-index values alone (I can let the first image disappear and the first appear but in combination it doesn't work).
Do I need a JS-library for that? Waypoints/scrollreveal etc., is this some kind of SVG magic or am I overlooking a simple solution?
on simple usage try onScroll() method using js for applying basic css colors on your element.
I believe those are animated objects, and the sections (their containers) have overflow:hidden, so those objects stay within their sections.
Also they probably have position:fixed and positioned using'top' and 'left' properties to stay on place all the time (or probably some JavaScript magic).
And ther animation is launched using JavaScript function scrollTop(), when visitor is on a certain distance from a page top.
I'm not sure what is used in this exactly page, but you can change and adjust scale, size, color and transparency depending on position from page top using JavaScrip - 100%.
Am designing a site and am quite new to it. So my question may be naive. There are two pages index.html and aboutUs.html.
For this eg, i have removed most of the invalid contents with regards to my question. My question is related to how can we dynamically change or handle the length of the page based on the content. In my case, index.html does not have too much text, so the UI looks fine, however aboutUS.html has too much content, and the content overlaps with the footer. How do I handle such scenarios? For reference, I have added some images below, the first image has no overlap, but the second one has. You can find the source code over at GitHub (https://github.com/vnmshenoy/global)
Images
Your problematic classes seem to be imageDiv and overlap.
Both these have defined heights.
When the content inside the element is larger than this height, it is visible, but is actually spilling outside that position, and so appears on top of the next element. If you set a border on these elements, you will see what I mean.
You could always use the overflow:scroll style here and scrollbars will appear when this happens, but you'd be better making your design a bit more fluid with regard to heights, especially if you plan to make it responsive.
So I apologize in advance if this question has been answered before- I tried searching but couldn't find much on it.
A designer and I are working to create this website- www.zeinal-jundi.com
This is predominantly a one-page layout using a scroll effect to navigate to different sections, although the site's Discography section does link to a separate page for each album. We also have a fixed header that allows the navigation to be visible the whole time. Originally, I had added a margin to each section of the page to accommodate the height of the fixed header. This however made the space between each section far too large, so my designer requested I find a way around this. I was able to fix it by instead adding a value to the scroll animation script that brings the section around 250px from the top, rather than to the overall top of the page (where it would then be covered by the fixed header)
So now, I've of course encountered the issue of linking to these sections from off another page- using code like the following:
Biography
This of course links back to the front page, but brings the section up to the very top, where it is hidden by our header. I'm wondering if anyone knows of a way I can link to this section from another page but add an action similar to the one I have on the scrolling function that will bring it up to 250px down from the top of the page rather than the very top without me having to add margins to each div.
Another option of course it to just make that pesky fixed header a lot shorter, or possibly hide the site title after the page scrolls to a certain point, but our client seems pretty adamant about having the entire header visible throughout, so I of course am trying to find a work around so we won't have to rethink the entire element (if such a solution even exists).
I hope I explained this well enough! Let me know if you need to see any additional code- would love to hear your thoughts on how to achieve such a thing! :)
If you're placing the block through CSS, you can use the CSS3 :target pseudo selector to position whatever section the link pointed to, e.g.:
:target {
/* ... example:
top: 250px;
*/
}
I have an ASP.net 4 app with a bunch of pages, all using the Site.Master as the primary layout which is a colored background, border, menu at the top and a gif in the bottom right corner of the border.
I've positioned everything using position:absolute and just set all of the elements in the site.master and the individual elements that appear on each page by using style:"left:100px top 100px" etc
So when you launch the app in normal IE mode everything looks perfect, however if you go full screen or you minimize IE, everything goes completely out of shape and all over the place.
What do I need to do in order for it to be consistent no matter whether you're in normal IE/Full screen/Minimized? Do I need to change the way I have used style:position tags on all of the elements or is it something else that I need to do?
My solution to this was to put a
div style="position:relative;"
inside and at the start of the BodyContent of each page then use absolute positioning on each of the elements which keeps all of them within the BodyContent border and shifts them properly when the browser is minimized or full-screened. Is this a good approach? It seems to have solved the problem I had but I'm concerned it may cause more problems I'm not currently aware of?
Page is not holding your settings because the width off page changes when you change browser size.
To make things all the same no mater what is the size of browser window set this with off body element.
Something like this:
<body style="width:1024px">