0

コードを別のブログから自分のフィドル アカウントにコピーしました。すべてが正常に機能しています。ページを下にスクロールすると、黄色のバーがページにくっつき、一番下までスクロールすると、フッターが黄色のバーを押し上げますが、これはまったく問題ありません。しかし問題は、[追加] ボタンをクリックしてテキスト ボックスを 10 ～ 15 回以上追加すると、黄色のバーがフッターに重なり、テキスト ボックスがブラウザー ウィンドウ内の下に移動して表示されなくなることです。フッターが黄色のスティッキーバーをその高さが小さくても大きくても押し上げてほしい。誰でも問題を解決するのを手伝ってくれますか?

デモはこちら http://jsfiddle.net/awaises/k7xfc/

Jクエリ

$window = $(window),
$sidebar = $(".sidebar"),
sidebarTop = $sidebar.position().top,
sidebarHeight = $sidebar.height(),
$footer = $(".footer"),
footerTop = $footer.position().top,    
$sidebar.addClass('fixed');

$window.scroll(function(event) {
scrollTop = $window.scrollTop(),
topPosition = Math.max(0, sidebarTop - scrollTop),
topPosition = Math.min(topPosition, (footerTop - scrollTop) - sidebarHeight);
$sidebar.css('top', topPosition);
});

$(document).ready(function () {
var counter = 2;
$("#addButton").click(function () {

        $('<div/>',{'id':'TextBoxDiv' + counter}).html(
          $('<label/>').html( 'Textbox #' + counter + ' : ' )
        )
        .append( $('<input type="text">').attr({'id':'textbox' + counter,'name':'textbox' + counter}) )
        .appendTo( '#TextBoxesGroup' )       
        counter++;
    });
});
4

1 に答える 1

0

期待される結果を妨げる主な問題は、コードがすべてのスクロールイベント中に更新された高さを取得するのではなく、最初に計算されたサイドバーの高さを利用していることです。

$window.scroll(function (event) {
    var scrollTop = $window.scrollTop();
    var topPosition = Math.max(0, sidebarTop - scrollTop);

    // Ensure you are using the current sidebar height and not the initial height
    topPosition = Math.min(topPosition, (footerTop - scrollTop) - $sidebar.height());

    $sidebar.css('top', topPosition);
});

私がお勧めするもう1つの提案は、addButtonクリックハンドラーの実行中にウィンドウスクロールハンドラーをトリガーして、アイテムを追加するときに適切な調整を行うことを確認することです。

$("#addButton").click(function () {
    $('<div/>', {
        'id': 'TextBoxDiv' + counter
    }).html(
    $('<label/>').html('Textbox #' + counter + ' : '))
        .append($('<input type="text">').attr({
            'id': 'textbox' + counter,
            'name': 'textbox' + counter
    })).appendTo('#TextBoxesGroup');

    // Trigger the scroll handler to ensure the sidebar is properly positioned
    $window.triggerHandler('scroll');

    counter++;
});

デモ

于 2013-02-28T07:07:49.893 に答える