4

画面の左下に固定されるボタンを作成しようとしています。私がやろうとしていることを再現するために JSFiddle でセットアップしようとしました。

ここに私のHTMLがあります：

<div id="header">header
</div>
<div id="button">button
</div>
<div id="content">some content
</div>
<div id="footer">footer
</div>

そしてCSS：

#header,#footer{
background-color:red;



}
#content
{
    height:2000px;
}
#footer
{
    height:200px;
}
#button
{
    background-color:gray;
    width:100px;
    height:100px;
    position:fixed;
    bottom:0;
    left:0;
    right:0;    
}

scrolltoFixed.js、lockfixed.jsなどのプラグインを使用する必要があることを読みましたが、私の問題は、JavaScriptの使用方法や編集を開始する場所がわからないことです。 ここにフィドルがあります

ボタンをフッターの位置で止めて、ドッキングしたようにしたい。

4

3 に答える 3

7

フッターの上に固定されるように更新されました。

これがあなたが意図したものであることを願ってい ます

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
       $('#button').addClass('fixed_button');
   }else{
       $('#button').removeClass('fixed_button');
   }
});

CSS:

.fixed_button{
    position:absolute !important;
    margin-top:1900px;
    bottom: auto !important;
}
于 2013-08-05T08:12:43.870 に答える
0

代わりに絶対配置を使用してください。また、left:0 と right:0 は使用しないでください。どちらか一方のみを使用してください。試す

position:absolute;
bottom:0;
left:0;

編集：申し訳ありませんが、あなたのコードはうまくいくようです。正確に何をしたいですか？

于 2013-08-05T08:05:57.197 に答える
0

私は似たようなものを探していましたが、適切な答えが見つかりませんでした。

var $fixed_element = $(".some_element")
if($fixed_element.length){
        var $offset = $(".footer").position().top,
            $wh = $(window).innerHeight(),
            $diff = $offset - $wh,
            $scrolled = $(window).scrollTop();
        $fixed_element.css("bottom", Math.max(0, $scrolled-$diff));
    }

したがって、固定要素はフッターの直前で停止します。重複しません。

于 2017-03-21T03:09:04.693 に答える