在html中滚动时应该修复黄色框

时间:2015-01-08 13:55:52

标签: javascript jquery html css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
    .wrapper{position:relative;}
    .topDiv{height:200px; width:100%;background:black;}
    .leftDiv{width:30%;float:left;height:1200px;}
    .leftDiv .box{
        height:100px;
        background:yellow;
        color:red;
        font-weight:bold;
        margin:10%;
        text-align:center;
        }
    .rightDiv{width:70%;height:1200px;}

</style>
</head>

<body>
    <div class="wrapper">
        <div class="topDiv">
        </div>
        <div class="leftDiv">
            <div class="box">
                fixed box
            </div>
        </div>
        <div class="rightDiv">
            <h2 class="marB15" >Diploma in Film Making | Duration : 2Years</h2>
                                <h3>Fee</h3>
                                <h4>Program Duration: 2 years (4 Semester)</h4>
                                Admission Fee: 42,000<br/>
                                Program Tuition Fee (Per Semester): 48,000<br/>
                                Examination Fee (Per Semester): 5,000<br/>
                                Security Deposit (Refundable): 10,000<br/>
                                <h4 class="padT10">Notes / Benefits / Penalties / Refunds:</h4>
                                <ul class="a">
                                    <li>All amounts are payable, unless mentioned otherwise to ‘Creo College’ by cheque / demand draft / NEFT / RTGS / online transfers. 
                                    Details for online transfer of funds can be collected from the admission desk</li>
                                    <li>Of the amounts payable in each installment, certain payments will need to be made to parties representing the University that is 
                                    granting the degrees. Appropriate intimation of such party names and the split in payments for each semester will be given. Examination 
                                    Fees, payable on an annual or semi-annual basis, to the University are additional. You will be intimated of the same as well.</li>
                                    <li>The Semester 1 installment includes security deposit, wherever applicable. This is non-interest bearing and refundable on course 
                                    completion or withdrawal, subject to deductions.</li>
                                    <li>All amounts are listed in Indian Rupees. The same amounts are payable by both Indian and International students.</li>
                                    <li>All payments made by Indian nationals must be accompanied by the Permanent Account Number (PAN) of the payee, without which fees will 
                                    not be accepted.</li>
                                    <li>Transfer of fees across / between courses is subject to management approval, on a case-by-case basis, and will involve a re-calculation 
                                    of fees based on the existing fees in the new course, the amount already paid by the student and where in the course (which semester) 
                                    the student chooses to transfer.</li>
                                    <li>Once a Semester has commenced, all fees paid / payable upto that date are non-refundable. Should a student leave his/her course
                                     mid-semester, any fees paid in advance for future semesters will be refunded, along with the security deposit paid, subject 
                                     to deductions.</li>
                                    <li>If a student wishes to withdraw from the course between 2 semesters, he / she has to convey the same in writing to the Dean and the 
                                    Administration Manager atleast 2 weeks prior to Semester commencement. After such date, entire fees payable for that semester will be 
                                    applicable.</li>
                                    <li>For 2-year & 3-year courses, students electing to pay the total tuition fees before Semester 1, will receive a fee waiver of 5% of the 
                                    fees paid in advance.</li>
                                    <li>Any scholarship / fee waiver / fee adjustment extended to a student will be used to reduce the fees payable for the final Semester 
                                    only of his/her course.</li>
                                    <li>Following payment lapses will attract penalties: 
                                        <ul class="padL15">
                                            <li>- A 1-week delay in Fee Payment will attract a penalty of Rs 1,500/- per week, including delays due to Creo not accepting 
                                            the fees on account of PAN unavailability / improper paperwork of the student.</li>
                                            <li>- Each act of cheque bouncing / dishonour of cheque will attract a penalty of Rs 5,000/-</li>
                                        </ul>
                                    </li>
                                    <li>Tuition fee does not include any additional study tour costs. While these are rare, if any, these have to be paid separately by the 
                                    students as and when required. Due notice will be given to students for the same.</li>
                                    <li>Adjustment of students’ dues / outstandings against advances / deposits / other considerations may be considered by management at its 
                                    discretion on a case-to-case basis.</li>
                                    <li>Excessively delayed fee payments may be cause for cancellation of admission.</li>
                                    <li>Fee Policies as above are subject to change at Management's discretion. Appropriate notification of the same will be given to all 
                                    students.</li>
                                </ul>
        </div>
    </div>
</body>
</html>

Plz看到这个小提琴:Link to fiddle

我希望黄色的盒子应该在scorlling页面时固定。但是不应该过来黑色div.it只包含它父div可以任何人帮助我plz 如何使用css position propery调整它

4 个答案:

答案 0 :(得分:0)

.leftDiv .box {
    height:100px;
    width: 200px;
    left: -60px;
    background:yellow;
    position: fixed;
    color:red;
    font-weight:bold;
    text-align:center;
}

答案 1 :(得分:0)

如果您想保持固定位置,请尝试此http://jsfiddle.net/1y4s57rL/6/

$(window).scroll(function(){
if ($(window).scrollTop() > 150){
    $('.box').css("top" , "-20px");
}
 else {
      $('.box').css("top" , "250px");
}


 });

答案 2 :(得分:0)

将框的位置设置为“固定”。这就是它的样子:

 .box {
      position: fixed;
 }

你去吧。问题解决了!

答案 3 :(得分:0)

我为你更新了小提琴:

http://jsfiddle.net/1y4s57rL/8/

需要:

固定定位 删除保证金 设置左侧和顶部CSS

.wrapper{position:relative;}
.topDiv{
    height:200px; 
    width:100%;
    background:black;
    position: relative;
    z-index: 1;
}

.leftDiv{width:30%;float:left;height:1200px;}
.leftDiv .box{ 
    z-index: 0;
    position: fixed;
    top: 220px;
    left: 10%;
    width: 150px;
    height:100px;
    background:yellow;
    color:red;
    font-weight:bold;       
    text-align:center;
    }
.rightDiv{width:70%;height:1200px;}