перемещение изображения вниз на прокрутке

Обычно, когда вы прокручиваете страницу вниз, содержимое перемещается вверх.перемещение изображения вниз на прокрутке

Мне нужно создать нечто похожее на оттенок окна. Представьте себе стену (ваш браузер) с окном (div), которое имеет выпадающий оттенок (изображение), прикрепленный вверху. делает вид, что это наверху: -100px. Когда вы тянете тень вниз (прокрутите вниз по div), тень (изображение) «проявит себя». (Выходит из верхней части: -100px положение, вверх:.! 0px положение, чтобы заполнить окно

любая помощь была бы оценена

это основной макет, который я сумел собрать вместе так далеко от соскабливать подобные вопросы здесь. это, очевидно, не работает, и это не rELAVENT, что я хочу сделать на всех, но я пытался сделать это relavent, но безрезультатно.

<!DOCTYPE html> 
<html> 
<head> 

<script> 
var $scrollingDiv = $("#aerobot"); 
$(window).scroll(function() { 
    $scrollingDiv.stop().animate({ 
     "marginTop": ($(window).scrollTop() + 30) + "px" 
    }, "slow"); 
}); 
</script> 

<style> 
body { 
    height: 600px; 
    overflow:scroll; 
} 
#one { 
    width: 300px; 
    height: 400px; 
    position:relative; 
    float:left; 
    background-color:pink; 
} 
img { 
    z-index:1000; 
    top:0; 
    position:absolute; 
    width: 350px; 
    height: 50px; 
    background-color:blue; 
    right:0; 
    display:block; 
} 
#parent { 
    width: 400px; 
    height: 400px; 
    background-color:red; 
    position:relative; 
    display:block; 
} 
</style> 
</head> 


<body> 

<div id="parent"> 
    <img title="yo" src="images/aerobot.png" id="aerobot" align="right" /> 
    <div id="one"></div> 
</div> 

</body> 
</html>

любая помощь будет супер пупер оценен!

источник

2014-01-10 Potts

Что-то вроде [** это **] (http://jsfiddle.net/A5f4r/)? – akinuri

Я считаю, что это то, о чем также говорил пользователь, который прокомментировал ниже. Я немного уточнил в своем ответе на tehm, но я добавлю его в свой OP для ясности. что я действительно хочу, это нечто большее, чем оттенок окна, который прокручивается с помощью полосы прокрутки. от позиции -px вверху, до позиции 0px, чтобы она заполняла всю рамку div. – Potts

На самом деле это не так много времени, но давайте попробуем [** this **] (http://jsfiddle.net/A5f4r/1/) – akinuri

Вот ваш код. Я думаю, что это самоочевидно.

var img = document.getElementById("aerobot"); 
window.onscroll = function() { 
    var bodyHeight = parseInt(getComputedStyle(document.body).height, 10); 
    var scrollLimit = bodyHeight - window.innerHeight; 
    var scrollTop = document.body.scrollTop; 
    var scrollPCT = (scrollTop/(scrollLimit/100))/100; 
    img.style.top = bodyHeight * scrollPCT - img.offsetHeight + "px" ; 
}

FIDDLE

источник

2014-01-14 19:25:21 akinuri

большое спасибо! нам удалось заставить его работать отлично. – Potts

Простой способ получить изображение оставаться там, где он был первоначально размещен, - использовать css.

Способ сделать это было бы с position: fixed;

источник

2014-01-10 22:26:34 frosty11x

Я не хочу, чтобы он оставался в одном месте, хотя я хочу, чтобы он переместился вниз, как прокрутки страницы, как я сказал в своем OP. например, представьте себе стену с окном, имеющим выпадающий оттенок. стена - это окно вашего браузера, окно - это div, а тень - изображение. когда вы опускаетесь на тень, она появляется сверху, чтобы заполнить окно. это то, что я хотел бы сделать. изображение в div, которое перемещается вниз из скрытой позиции вверху, чтобы заполнить рамку div. – Potts

Хорошо, если вы дадите все остальное фиксированное положение и не придадите изображению фиксированное положение, я считаю, что оно будет выглядеть так, как вы хотите. – frosty11x

перемещение изображения вниз на прокрутке

ответ

Смежные вопросы