We Keep Coding

How to let a part of a "background-image" still visible when scrolling down

I'm recently facing a dilemma with my new Wordpress site.
I'm wondering how to keep a part of my header image visible when i'm scrolling down in the page.
For now, my header image is 75% of the page height, but when i'm scrolling down, the image disapear as it should be.
But what i want, is that a certain part of it, let's say 20%, stay visible at the top in a "fixed" position.
So, to resume in pictures :
What i have without scrolling :
http://i.stack.imgur.com/2NxcQ.jpg
What i would like to have when scrolling down :
http://i.stack.imgur.com/nwoQw.png
I don't know if i'm clear enough, though, thanks to everyone who will try to help me on this !

You can use a jquery plugin like sticky:
<div class="top">Content</div>
<div class="header"></div>
<div class="content">
....
</div>
Then for CSS, you apply your image:
.header
{
background-image: url('http://placekitten.com/200/300');
height:300px;
width: 100%;
}
Then in your js, you can use the sticky plugin:
$(".header").sticky({topSpacing:-250});
Notice the negative number on the spacing offset, which allows most of the image to be scrolled.
Example fiddle: http://jsfiddle.net/CZYav/2/

I have a demo here: http://jsbin.com/ubolos/1/edit
Just keep tracking you scrolled distance and modify the background property of the div when you find that user has scroll too far down. No other plugins of jQuery needed.

make the whole page scroll beneath a certain height at the top without any scroll bar

html:
<div class="div_fixed"></div>
<div class="other_content">
content goes here
</div>
css:
.div_fixed{
position:fixed;
height:40px;
}
.other_content{
height:200px;
}
The div_fixed will remain fixed at the top position of the page.
But as the page scrolls up, the content of the div other_content will vanish just at the lower edge of the div div_fixed .
In the case of scrolling down the invisible content of other_content will begin to be visible from the lower edge of the div_fixed
How to achieve that ?
EDIT: no scroll bar should appear for any div

Use overflow: hidden to get rid of scrollbars

Is this what you're looking for? http://jsfiddle.net/BCRPa/

I've taken your HTML/CSS and added a bit on a jsFiddle - I think in order to achieve the effect you're looking for, you just need to make your content actually tall enough to be scrollable. At 200px high and one line of text, nothing is going to scroll.
So I made your other_content div taller, and then added a top: 0 to your .div_fixed selector, to keep it stuck to the top of the screen, and a margin-top: 40px to the .other_content div in order to have it start below the floating div.
If you want it to be a navbar-type thing, you can of course add a width: 100% to the .div_fixed.
All of this should transfer into a container div (with position: relative) fairly easily as well if you want, although you may have to re-position the fixed div.

Position a Div "Fixed" Vertically and "Absolute" Horizontally within a "Position:Relative" Container Div

I'm looking for a way I can create a div which will be fixed on the page vertically, so if the user scrolls down, the div stays at the same place on the page. But have it positioned absolutely horizontally, so if the users screen is narrower than my webpage, scrolling to the right or left will not cause the div to move with the screen and, in some cases, remain either half visible at the edge of the screen or off the page completely.
This div must be within a "Position:Relative" Div.
I'm fairly sure there is no way to assign different positions to the varying axis of a div but this is the best way to describe the effect which I am hoping to achieve.
I have this so far, which is basically just a Fixed Div within a Relative Div.
CSS
#container {
position:relative;
width:700px;
height:1000px;
top:50px;
left:50px;
background-color:yellow;
}
#blue-box{
position:fixed;
width:100px;
height:100px;
background-color:blue;
margin-top:20px;
margin-left:400px;
{
HTML
<div id="container">
<div id="blue-box"></div>
</div>
I have also created a jsFiddle to help demonstrate the problem.
This works fine for the vertical, but if you resize your web-browser so that it is narrower than the yellow box (container) and then scroll horizontally, the blue box will move with the page. I'm hoping to stop that from happening.
If there is no way to achieve this through CSS, I'm perfectly happy to use JavaScript as long as it works with all modern browsers and both IE7 and IE8. (Which is why I have added the JavaScript tag)
Can anyone help me out?

With JQuery, use the scrollLeft() property of the document! This would work
$(window).scroll(function(event) {
$("#blue-box").css("margin-left", 400-$(document).scrollLeft());
});
See also
http://jsfiddle.net/zhQkq/9/
Good luck!
Edit: If you want it to use your preset margin-left instead of a hard-coded "400", use
$(window).scroll(function(event) {
$("#blue-box").css("margin-left", $("#blue-box").css("margin-left")-$(document).scrollLeft());
});

Using vanilla javascript would be something like this:
var bb = document.getElementById('blue-box');
window.addEventListener('scroll',function(event){
bb.style.marginLeft = window.scrollX + 'px';
});
In modern browsers, as of 2020, you should try to use the CSS position:fixed; instead of JavaScript positioning because it is widely supported now.

Here's my solution (tested in Opera and Firefox): http://jsfiddle.net/cCH2Z/2
The trick is to specify right: 0px;, this will position the box 0px from the right border of the window.

Scrollbar for contentplaceholder

how to make the scrollbar of the hole page affect only on ConentPlaceHolder , i use style=" overflow:scroll; height: 500px;" but it makes a special scrollbar for Conentplaceholder but i want the main scrollbar to do this effect .

As far as I know, the best way to do it will be to use position:fixed on all your non-scrolling elements, and then just let the page flow normally. This way, the main scrollbar will scroll the content while the rest of the page appears not to move, giving the desired effect.

Here is a jsfiddle of Dereleased's suggestion: http://jsfiddle.net/sQmhY/2/
Note that the padding of the #content div is the same as the heights of the #header and #footer divs.

Demo
scroll bar demo
Documentation

How can I make a box inside the page appear after clicking a link?

I want an image, that when pressed, shows another image apear from the left of the screen to a point in the background image. I then want to zoom in on that image and make a modal box apear. How can I do this?
The point in the background need to stay the same. When I resize the browser it needs to appear at the same point.

See a working demo of the following code here.
The first part of your problem can be solved using position:absolute within a position:relative container that holds your background image.
#wrapper {
overflow-x:hidden;
width:100%;
position:relative;
}
#absSlide {
width:100px;
position:absolute; top:200px; right:-100px;
}
Make sure the wrapper is as wide as the window and that the overflow-x:hidden so that the slide in div isn't visible before the click. The slide in will be positioned just off stage to the right and top:XXXpx where XXX is the distance from the top of the page where your background element is. Your jQuery would look something like this to animate in the hidden div on click:
$('#showSlide').click(function(e){
e.preventDefault();
$('#absSlide').animate({'right':0},450);
});
You should be able to modify this code so that it works on the left side instead and animate the left property in the jQuery. I didn't want to make it too easy as your question was very general. You should ask a separate question for the rest of your problem after you share the working code for what you're able to implement on the first part.