DIVs जब एक डिव

Question

अंदर स्क्रॉल जब पोजिशनिंग उन्हें तय मैं 4 DIVs है और मैं की तरह नीचे

function adjustPositions(e) { 
    var div = e ? $(this) : $('.parent'); 
    div.find('.left').css({ 
     left: div.scrollLeft() + "px" 
    }); 
    var right = div.find('.right'); 
    right.css({ 
     left: div.scrollLeft() + div.width() - right.width() + "px" 
    }); 
    div.find('.header').css({ 
     top: div.scrollTop() + "px" 
    }); 
    var bottom = div.find('.footer'); 
    bottom.css({ 
     top: div.scrollTop() + div.height() - bottom.height() + "px" 
    }); 
} 
adjustPositions(); 
$('.parent').on('scroll', adjustPositions); 

यहाँ, बेला http://jsfiddle.net/8NL2S/5/ है जब मैं सफारी में परीक्षण कर रहा हूँ स्क्रॉल पर 4 तत्वों की बदलती पदों हूँ झिलमिलाते , यह झिलमिलाहट। इसमें कुछ भी नहीं है। सफारी ने इस तरह की उम्मीदों को कई बार इस तरह लात मार दिया। मैं इसे कैसे ठीक करूं।

Answer 1

देखें अपने div आकार तय कर रहे हैं और आप तो सभी ब्राउज़र जे एस समारोह बस सेट सीएसएस नाव फोन करने की कोई जरूरत में एक ही स्थिति पर चाहते हैं अपने सभी divs के साथ संपत्ति और उस 4 div के बाहरी div पर सीएफ कक्षा का उपयोग करें। उदाहरण:

HTML: 

<div class="parent"> 
    <div class="static cf"> 
     <div class="left"></div> 
     <div class="right"></div> 
     <div class="header"></div> 
     <div class="footer"></div> 
    </div> 
</div> 

CSS: 


.header{ 
    border:1px solid red; 
    width:100px; 
    height:100px; 
    background-color:#F2F2F2; 
    float:left; 
    top:0px; 
    left:0px; 
    z-index:10; 
} 
.left{ 
    border:1px solid red; 
    height:100px; 
    width:100px; 
    left:0px; 
    float:left; 
    top:100px; 
    background-color:#CCC; 
} 
.right{ 
    border:1px solid red; 
    height:100px; 
    width:100px; 
    right:0px; 
    float:left; 
    top:100px; 
    background-color:#CCC; 
} 
.footer{ 
    border:1px solid red; 
    width:100px; 
    height:100px; 
    background-color:#F2F2F2; 
    float:left; 
    left:0px; 
    bottom:0px; 
    z-index:10; 
} 
.static{ 
    height:105px; 
    width:410px; 
    position:relative; 
} 
.cf{clear:both} 

Answer 2

आपके स्क्रॉल फ़ंक्शंस के कारण, जब आप स्क्रॉल करते हैं तो divs re-rendering/re-position की वजह से आपके फ्रेम झिलमिलाहट करते हैं। इसे रोकने के लिए आप अपना प्रदर्शन बनाने की एक अलग विधि का उपयोग कर सबसे अच्छे हैं।

जैसा कि आप सीएसएस और jquery फाइलों के साथ सादे एचटीएमएल का उपयोग करने लगते हैं, आपकी समस्या के आसपास होने के कई अन्य तरीके हैं।

पहला तरीका केवल आपके स्क्रॉल फ़ंक्शंस को हटाना होगा, ऐसा लगता है कि आपको उनकी आवश्यकता नहीं है। position:fixed इसे ठीक करेगा, इसलिए जब आप स्क्रॉल करते हैं तो आपके divs आपके पीछे आते हैं।

अन्य तरीका किसी भी प्रकार के ढांचे का उपयोग करेगा। यह सीएसएसजीड आधारित हो सकता है क्योंकि केरी लियू ने टिप्पणियों में एक उदाहरण दिखाया है, या यदि आप निराश हैं तो यह एचटीएमएल आधारित हो सकता है (जैसे <frame>)।

यदि आपके पास स्टाइल के लिए उच्च आवश्यकताएं हैं तो स्थितिकरण के बाद शायद आपकी सहायता के लिए एक jquery प्लगइन उपलब्ध हो।

Answer 3

आप ऐसा कुछ ढूंढ रहे हैं?
http://jsfiddle.net/sijav/8NL2S/12/
आप हर position:fixed चालू करना होगा ... noo JQuery

Answer 4

मैं यहाँ भी आसान सोच रहे होंगे उपयोग करने की आवश्यकता है, लेकिन यह नहीं है कि स्थिति: तय आपकी समस्या का समाधान?

मुझे डर है कि जावास्क्रिप्ट सहित कोई अच्छा समाधान नहीं है। जावास्क्रिप्ट को संभालने में सफारी की गति एक धाराप्रवाह एनीमेशन प्राप्त करने के लिए अभी तक पर्याप्त नहीं है।

नीचे आपको केवल सीएसएस का उपयोग करके अपनी समस्या का समाधान करने का अगला सबसे अच्छा समाधान मिल जाएगा।

मैं निम्नलिखित करने के लिए अपने सीएसएस संपादित:

.header{ 
    width:1000px; 
    height:100px; 
    background-color:#F2F2F2; 
    position:fixed; 
    top:0px; 
    left:0px; 
    z-index:10; 
} 
.left{ 
    height:1000px; 
    width:100px; 
    left:0px; 
    position:fixed; 
    top:100px; 
    background-color:#CCC; 
} 
.right{ 
    height:1000px; 
    width:100px; 
    right:0px; 
    position:fixed; 
    top:100px; 
    background-color:#CCC; 
} 
.footer{ 
    width:1000px; 
    height:100px; 
    background-color:#F2F2F2; 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    z-index:10; 
} 
.static{ 
    height:1000px; 
    width:1000px; 
    position:relative; 
} 

मैं सभी जावास्क्रिप्ट हटा दिया। इसके अलावा, कुछ भी नहीं बदला। छोड़ दिया;:

fiddle

Answer 5

position:fixed तरह से ऊपर सुझाए गए अपने भीतर के खिड़की के सापेक्ष divs स्थिति होगी, और नहीं माता पिता div का उपयोग करना।

.parent { 
    position:relative; 
    height:400px; 
    width:800px; 
    margin:0 auto; 
    overflow:auto; 
    border:1px solid #CCC; 
} 
.header, .footer { 
    position:fixed; 
    width: 800px; /* .parent width */ 
    height:100px; 
    z-index:10; 
    background-color:#F2F2F2; 
} 

.footer { 
    margin-top: 300px; /* .parent hight - .footer hight */ 
} 

.left, .right { 
    position:fixed; 
    width: 100px; 
    height: 400px; /* .parent height */ 
    background-color:#CCC; 
} 

.right { 
    margin-left: 700px; /* .parent width - .right width */ 
} 

.static { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 1000px; 
    height: 1000px; 
} 

यह लेआउट और व्यवहार आपको अस्थिर बिना प्राप्त करने के लिए कोशिश कर रहे हैं देना चाहिए: आप .parent अंदर सब कुछ रखना चाहते हैं तो नीचे दिए गए सीएसएस (कोई जे एस आवश्यक) का उपयोग करें। आप इसे नीचे आज़मा सकते हैं।

http://jsfiddle.net/myajouri/VYmHv/1/

आशा है कि मदद करता है!