0

ユーザーがスクロールした瞬間から上部にくっつくdiv（id = "hoe"）を作成しようとしました。スクロールする前に、divはヘッダーの下にあります。残念ながら、何度も試してみても動作しません。私が間違っていることについてのヒントや助けは大歓迎です。これがテストバージョンの私のコードです：

<!DOCTYPE html>
<head>

<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<style type="text/css">

#header
{
background-color: blue;
width: 100%;
height: 125px;
}

#hoe
{ 
background-color: red;
height: 180px;
width: 100%;
z-index: 9999;
top: 125;
position: fixed;
}

#een
{
margin-top: 180px;
background-color: green;
height: 700px;
width: 100%;
}

</style>

<script type="text/javascript">
$(document).ready(function() {

if ($('body').hasClass('lock')) {
    bar_pos = $('#hoe').offset();
    if (bar_pos.top >= (125+180)) {
        $('#hoe').css('top', 0);
        //document.getElementById("hoe").style.top="0"; also tried this
    }
});
});

</script>

</head>
<body class="lock">
<div id="header">
</div>
<div id="hoe">
</div>
<div id="een">
</div>
</body>
</html>
4

3 に答える 3

3

私はあなたのコードを修正し、ここでフィドルを作成しました：http: //jsfiddle.net/UcX4A/

JavaScriptに余剰ブラケットがありました

$(document).ready(function() {
    if ($('body').hasClass('lock')) {
        bar_pos = $('#hoe').offset();
        if (bar_pos.top >= (125+180)) {
            $('#hoe').css('top', 0);
            //document.getElementById("hoe").style.top="0"; also tried this
        }
    }); <<< Surplus bracket
});

また、「スクロール」イベントは何にも添付されていなかったため、評価されていませんでした。私はあなたを変えました：

$(document).ready(function() {

に：

$(window).scroll(function() {
于 2013-02-08T12:48:09.890 に答える
1

これを参照してください：http： //jsfiddle.net/WTnEd/

$（window）.scroll（）を使用します

$(document).ready(function () {
var bar_pos;
$(window).scroll(function (e) {
    if ($('body').hasClass('lock')) {
        bar_pos = $('#hoe').offset();
        if (bar_pos.top >= (125 + 180)) {
            $('#hoe').css('top', 0);
        }
        else{
            $('#hoe').css('top', 125);
        }
    };
});
});
于 2013-02-08T12:52:36.153 に答える
1

私が質問を理解しているように、これはスクロールを開始するときにdivをページの上部に固定する別の方法です。

<div id="header" style="position:fixed; top:0px; left:0px; right:0px;
    height:100px; z-index:2; background:blue;"></div>
<div id="hoe" style="position:fixed; top:100px; left:0px; right:0px;
    height:100px; z-index:2; background:red;"></div>
<div id="een" style="position:absolute; top:200px; left:0px; right:0px;
    height:100px; z-index:1;">
  <p>dummy text</p>
  <p>dummy text</p>
  <p>dummy text</p>
</div>
于 2013-02-09T13:20:58.603 に答える