Occasionally on websites I press the spacebar to scroll down to more content, only to find myself hampered by the content scrolling too far due to a floating menu bar confusing the browser about how far to scroll.
What are some design decisions that site designers can use to deal with this usability issue?
One idea that I can come up with for this (other than frames shudder) is to not float the menu bar and instead use a scrolling div to contain the contents.
But does that have any significant impact on other things?
Agree completely!
I can see the usefulness with a bar to display alerts and keep handy items in reach, always in front. But I would argue it’s a accessibility issue to have the scroll length being taller than the visible space.
I find it annoying to need an arrow-key to correct the page-scroll, so for regular sites I usually set a user-style to allow fixed elements to scroll with content.
Your idea to use a separate container to fix the scroll length could be a work around. (Just like a nice frame )
Another way could be to let the overlayed menu bar scroll away together whith the scrolling content, but then show up in its fixed place when the pointer goes into a transparent dummy bar area. With more effort it could probably auto-display alerts too.
I’ve put together an example to see if you think it could be an alternative.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Scrolling Fixed Header</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
html,
body{
margin:0;
padding:0;
}
h1, h2, p{padding:0 2rem}
a{color:inherit; text-decoration:none}
a:hover{color:blue}
#wrapper{
padding:200px 0;
background:lightgoldenrodyellow;
}
#header{
position:absolute; /* attach the header to page content = scroll */
top:0;
right:0;
left:0;
height:200px;
background:tan;
}
#header:hover{
position:fixed; /* attach the header to viewport = show */
}
#header:after{
position:fixed; /* transparent header pulling dummy */
top:0;
right:0;
left:0;
height:200px;
outline:1px dashed peru; /* show header pulling area */
outline-offset:-1px;
content:"\a0";
}
#header:hover:after{
display:none; /* remove the dummy ovewrlay */
}
p:before{
content:"Paragraph ";
}
p:after{
white-space:pre;
content:"\aLine 1\aLine 2\aLine 3\aLine 4";
}
</style>
</head><body>
<div id="wrapper">
<div id="header">
<h2><a href="#">Scrolling Fixed Header</a></h2>
</div>
<h1><a href="#">Scrolling Page</a></h1>
<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p>
<p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p>
</div>
</body></html>
Looking forward to see other ways to avoid the too far page scrolling. 
What are some design decisions that site designers can use to deal with this usability issue?
Opinion: They can decide to not waste any screen estate when there can be other ways to do things.
When I bother, I deal with it in a user-style. For SitePoint, the header-fix part adjusted according to the posted example, looks like this:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("community.sitepoint.com"){
/* fixed-header-scroll-fix */
.docked .d-header{
position: absolute;
}
.docked .d-header:hover{
position:fixed;
}
.docked .d-header .icons{
padding-left:40px;
}
.docked .d-header:hover .icons{
padding-left:0;
}
/* show-notifications */
.docked .d-header .icons .notifications {
position:fixed;
top:11px;
right:130px;
visibility:hidden;
}
.docked .d-header:hover .icons .notifications {
position:relative;
top:auto;
right:auto;
visibility:visible;
}
.docked .d-header .icons .notifications .badge-notification {
visibility:visible;
}
/* show-a-notifications-icon */
.docked .d-header .icons .notifications .unread-notifications:after,
.docked .d-header .icons .notifications .unread-private-messages:after{
position:absolute;
top:17px;
left:-19px;
color:#999;
font:1.714rem "FontAwesome";
content:"\f075";
}
.docked .d-header .icons .notifications .unread-private-messages:after{
left:-11px;
}
.docked .d-header:hover .icons .notifications .badge-notification:after{
display:none;
}
.docked .d-header:after{
position:fixed;
top:0;
left:0;
width:100%;
height:63px;
outline:1px dashed black;
outline-offset:-1px;
content:"\a0";
}
.docked .d-header:hover:after{
display:none;
}
} /* END @-rule */
Hopefully there will be some new designs that is more careful with screen estate in the future, especially when it comes to designing for mobiles.
Spotted a typo in my code above. As usual. 
.docked .d-header .icons .notifications .unread-private-messages:after{ left:-11px; }
That value should be a positive:
.docked .d-header .icons .notifications .unread-private-messages:after{
left:11px;
}
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.