Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How is this effect done?

Posted on 2014-01-15
4
Medium Priority
?
541 Views
Last Modified: 2014-01-15
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
0
Comment
Question by:Kenny Hopton
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39784488
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
 

Author Comment

by:Kenny Hopton
ID: 39784497
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
 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 2000 total points
ID: 39784506
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
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39784508
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

Featured Post

Docker-Compose to Simplify Multi-Container Builds

Our veteran DevOps Author takes you through how to build a multi-container environment, managed with a single utility in order to simplify your deployments.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question