小Jquery問題

Question

我有一個運行在www.blisshair.com.au上的JQUERY腳本。

該腳本將3個左側div設置爲粘滯狀態，即當用戶滾動div後面時。 我一直在試圖讓jquery在名爲wholewrap的div上找到高度（顧名思義就是整個站點的包裝）。 一旦我得到了這個值，我想看看它是否小於某個值（目前我正在嘗試1500px - 試驗和錯誤以查看哪個工作正常）。 如果wholewrap的高度小於我的預定大小，那麼我希望setting2變量反映一個尺寸，否則反映另一個尺寸。

這是我的代碼。我想要做的就是將setting2的高度設置爲div wholewrap的高度（以阻止www.blisshair.com.au上的溢出問題）我已經添加了整個JS文件，因爲我不確定它在哪裏腳麻：

function StickyScroller(obj, options) 
{   
//Store function scope 
var $this = this; 

//Store initial top and left/right values 
var top = $(obj).css('top'); 
var left = $(obj).css('left'); 
var right = $(obj).css('right'); 

var scroll = 0; 
var tempScroll = 0; 

//------------------------------------------------------------ 
// Set default property values 
//------------------------------------------------------------ 
var defaults = { 
start: 0, 
end: 1000, 
interval: 400, 
margin: parseInt(top, 10), 
range: 400 
}, settings = jQuery.extend(defaults,options); 
obj = $(obj); 

settings.index = 0; 
settings.oldIndex = 0; 

//Accessors for settings 
GetSet.getters({scope: $this, obj: settings}); 

//------------------------------------------------------------// 
//      Callback Functions     // 
//------------------------------------------------------------// 
var Callback = {}; 

Callback.newIndex = function(){}; //When the index changes 
Callback.limbo = function(){};  //When scroller not in range 
Callback.scroll = function(){}; //On window scroll 

//Get setters for Callback functions 
GetSet.setters({scope: this, prefix: "on", obj: Callback}); 

//=========================================================// 
//Public distanceFrom 
//Purpose: Determines the distance in pixels between 
//   the scroller and an index 
//Parameters: 
// index: The index whose distance from scroller will be calculated 
//Postcondition: Returns an integer 
//=========================================================// 
this.distanceFrom = function(index) 
{   
    tempScroll = $(window).scrollTop(); 

    //Check for both references: "Top" of the range and "bottom" 
    var top = index*settings.interval; 
    var bottom = index*settings.interval + settings.range; 

    var distanceFromTop = Math.abs(tempScroll-top); 
    var distanceFromBottom = Math.abs(tempScroll-bottom); 

    //Return the smallest distance 
    if(distanceFromTop < distanceFromBottom) 
    { 
     return distanceFromTop; 
    } 
    else 
    { 
     return distanceFromBottom; 
    }   
}; 

var whwrap = $("#wholewrap").height(); 
var wrap2 = $("#wrap2").height(); 
var mwrapEDIT = $("#middlewrap").height(); 
var mwrap = (mwrapEDIT * .8); 

if(whwrap < 1500) 
    { 
     var setting2 = wrap2; 
    } 
    else 
    { 
     var setting2 = mwrap; 
    } 




//=========================================================// 
//Public closestIndex 
//Purpose: Determines the closest index 
//Postcondition: Returns the closest index as an integer 
//=========================================================// 
this.closestIndex = function() 
{ 
    //If index is 0, automatically return 1 
    if(settings.index === 0) 
    { 
     return 1; 
    }   

    //Distance from next/previous index 
    var dPrev = this.distanceFrom(settings.index-1); 
    var dNext = this.distanceFrom(settings.index+1); 

    //Return the index associated with the smallest distance 
    if(dPrev <= dNext) 
    { 
     return settings.index-1; 
    } 
    else 
    { 
     return settings.index+1; 
    } 
}; 

//=========================================================// 
//Private getIndex 
//Purpose: returns index 
//=========================================================// 
var getIndex = function() 
{   
    tempScroll = $(window).scrollTop() + settings.margin;   

    //Make sure movement would be in the bounds 
    if(tempScroll > settings.start && tempScroll < setting2) 
    {          
     //Possible new index 
     tempIndex = Math.floor((tempScroll-settings.start)/settings.interval); 

     //Make sure the index is different before reassigning 
     //or executing the callback 
     if(tempIndex !== settings.index) 
     { 
      //Store old index 
      settings.oldIndex = settings.index;     

      //Assign new index 
      settings.index = tempIndex;     
     } 
    } 
    //If tempScroll goes beyond end mark, set distance at end mark 
    else if(tempScroll >= setting2) 
    { 
     settings.oldIndex = settings.index; 
     settings.index = Math.floor((setting2-settings.start)/settings.interval); 
    } 
    //If tempScroll goes beyond beginning mark, set distance at start 
    else 
    { 
     settings.oldIndex = settings.index; 
     settings.index = 0; 
    }   
}; 

//=========================================================// 
//Public firstIndex 
//Purpose: Returns first index 
//Postcondition: Returns an integer 
//=========================================================// 
this.firstIndex = function() 
{ 
    return 0; 
}; 

//=========================================================// 
//Public lastIndex 
//Purpose: Returns last index 
//Postcondition: Returns an integer 
//=========================================================// 
this.lastIndex = function() 
{ 
    return Math.floor((setting2-settings.start)/settings.interval); 
}; 

//=========================================================// 
//Public inRange 
//Purpose: Determines if the scroller is in interval range 
//Postcondition: Returns boolean 
//=========================================================// 
this.inRange = function() 
{  
    var scroll = $(window).scrollTop() - settings.start + settings.margin;   

    var inRange = (scroll >= settings.index * settings.interval) && 
    (scroll <= (settings.index*settings.interval + settings.range)); 

    return inRange; 
}; 


//------------------------------------------------------------// 
//     On Browser Scroll      // 
//------------------------------------------------------------//  
var wrap = $('<div id="scrollcontainer">').css(
{ 
    width: obj.width(), 
    height: obj.height(), 
    position: "absolute" 
}); 

obj.wrap(wrap); 

$(window).scroll(function() 
{ 
    scroll = $(window).scrollTop() + settings.margin; 

    //Get the current index 
    getIndex(); 

    //If scroll less than beginning, set back to beginning 
    if(scroll < settings.start) 
    { 
     $(obj).css({ 
     position : 'absolute', 
     top: 0, 
     left: 0, 
     right: 0}); 

     $("#scrollcontainer").css({ 
     position : 'absolute', 
     top: settings.start, 
     left: left, 
     right: right}); 
    } 

    //If scroll greater than ending position, set to end 
    else if(scroll > setting2) 
    { 
     $(obj).css({ 
     position : 'absolute', 
     top: 0, 
     left: 0, 
     right: 0}); 

     $("#scrollcontainer").css({ 
     position : 'absolute', 
     top: setting2, 
     left: left, 
     right: right}); 

    } 

    //Make sure we stay in the specified boundaries 
    else 
    { 
     //Put back to fixed 
     $(obj).css({ 
     position : 'fixed', 
     top: settings.margin, 
     left: left, 
     right: right}); 
    }   

    //If in the specified range and a new index, do the callback   
    if(settings.oldIndex !== settings.index) 
    { 
     Callback.newIndex(settings.index); 
    } 

    //Do the "limbo" call back, which is a callback that executes when 
    //the scroller is not in the range, but still between start and end 
    if(!$this.inRange() && scroll > settings.start && scroll < setting2) 
    { 
     Callback.limbo(settings.index); 
    } 

    //Do the scroll callback regardless of what happens 
    Callback.scroll(settings.index); 
}); 

}

我在正確的軌道上？

謝謝。

Answer 1

UPDATE：

順便說一句，有你有沒有考慮一個CSS的解決方案的一個原因？下面的CSS似乎來解決這個問題：

div#menuwrap { 
    position: fixed; 
    left: 0; 
    top: 5%; 
} 

尋找你的網站（在谷歌Chrome，爲1440 x 900運行）：

• 你有5個格與id="rnd_container"（在id屬性應該是每個元素都是獨特的）。
• 你有5個格與id="contentimages"
• 你有3周的div id="block"
• 你得上h3標籤的情況下，不匹配（<h3>15/1/12 - Bliss Online launched!</H3>應該是<h3>15/1/12 - Bliss Online launched!</h3>）。這可以防止適當的標籤關閉（導致問題）。

以上是什麼，我會認爲是大問題，但你可以看到所有的驗證錯誤的：http://validator.w3.org/check?uri=http%3A%2F%2Fwww.blisshair.com.au%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

我也將確保<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>是加載的第一個腳本。

在http://blisshair.com.au/bookonline.php上，<div id="right">...</div>的寬度爲745px，餘量爲220px。剩餘邊際是導致怯懦的原因。如果您將其更改爲22px，則看起來很好。或者，您可以將div＃的寬度更改爲57％或558px，這也可以工作。

至於修復頁腳的溢出問題（和setting2有關），$("#wholewrap").height()返回2597px，所以你的任意1500px的限制永遠不會達到。此外，<div id="footer" class="clearer">是<div id="wholewrap">的子女。埃爾戈，div#footer的高度是div#wholewrap的高度的一部分，所以我不確定改變setting2將解決問題。

你想如何解決「溢出問題」？ div#footer在屏幕上時是否要div#middlewrap向上滾動？你想div#footer向右移？還有別的嗎？請澄清如何解決問題。