How is this effect done?

I see pages like:

http://www.bloomberg.com/quicktake/the-fall-of-gold/

http://www.wix.com/website-template/view/html/1296

http://www.shape5.com/demo/index.php?cleanout

where there Is a background image and the semi-transparent page scrolls over it except for a fixed header.  I like this effect but I have not learned a lot of javascript/jquery etc. so
"view source" isn't making it obvious to me whether this is a tricky or unreliable way to build a page.

My first instinct was to pay for a template so that I could avoid the learning curve but if it is not as complicated as all that I'll just make an effort to learn the technique. So...

How is it done? The examples have a lot of referenced scripts and such making it hard for me to read and I'd like a super-simple example that is not so busy doing other stuff.
 
Thanks
Kenny HoptonAsked:
Who is Participating?
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
First, I like to start with a responsive grid.  I typically use bootsrap or foundation.  http://getbootstrap.com/  

Bootstrap has what they call a sticky header http://getbootstrap.com/examples/navbar-fixed-top/

As long as you have bootstrap css and js in your files this will work by adding classes that are ready to go navbar navbar-default navbar-fixed-top
 <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->

Open in new window

0
 
Kenny HoptonAuthor Commented:
Great, that seems to establish the fixed header.  The transparency is also something I have not learned.  Is the fixed background a la the wix example difficult?
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The background has a transparency.  If you look the code via a console you can see what selector is being used.
.wysiwyg_viewer_skins_area_RectangleAreac1-bg {
overflow: hidden;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: rgba(255, 255, 255, 0.890196);
}

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
All the browsers have a console. I use chrome https://developers.google.com/chrome-developer-tools/docs/console and in firefox you use firebug https://getfirebug.com/

If you are really starting out and kind of hacking away, it would be very helpful and time saving in the end if you take a time out and spent several hours a day going through the basic code for html, css.  Then do javascript basic to jquery basic to javascript intermediate etc.

http://www.codecademy.com/learn

Even if some of it you know, start at the start and work your way through.  Don't try and do it all in one sitting.  If you spend a total of 5 or 10 hours on there over the course of a few days, you will save yourself 10 times that down the road.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.