jQuery .css property not working on scroll function

Question

I am learning jQuery by implementing its properties. I am having difficulties when I'm trying to make a div stick to the top of the page when its scrolled to. This is my HTML div:

<div class="col span_1_of_2 poll_div" id="poll-div">
                    <p>POLL OF THE WEEK</p>
                    <p>Best pakistani singer?</p>
                    <table>
                        <tr>
                            <td width="100%">
                                <input type="submit" id="op1" onclick="load(this.id);" class="options option1" value="option # 1"/>
                            </td>
                            <td class="numb">
                                <div id="votes1"><?php $conn = mysql_connect('localhost', 'root', ''); 
                                                        mysql_select_db('poll');
                                                        $row= mysql_fetch_assoc(mysql_query("SELECT * FROM `polls` WHERE 1"));
                                                        echo $row['option1'] . "/" . $row['total'] ?></div>
                            </td>
                        </tr>

                        <tr>
                            <td width="100%">
                                <input type="submit" id="op2" onclick="load(this.id);" class="options option2" value="option # 1"/>
                            </td>
                            <td class="numb">
                                <div id="votes2"><?php echo $row['option2'] . "/" . $row['total'] ?></div>
                            </td>
                        </tr>

                        <tr>
                            <td width="100%">
                                <input type="submit" id="op3" onclick="load(this.id);" class="options option3" value="option # 1"/>
                            </td>
                            <td class="numb">
                                <div id="votes3"><?php echo $row['option3'] . "/" . $row['total'] ?></div>
                            </td>
                        </tr>
                    </table>
                </div> <!--Poll-->

EDIT CSS:

background-color: white;
position: fixed;
width: 25%;
float: right;
margin-right: 2%;
margin-top: 3.5%;
border: 1px solid #ccc;
box-shadow: 2px 2px 2px 2px #ccc;
padding-bottom: 30px;

and finally JQuery:

$(document).ready(function(){

    $(window).scroll(function(){
        if($(this).scrollTop() > 280 && $("#poll_div").css('position') == 'relative'){
            $("#poll_div").css("position", "fixed");
        }

        if($(this).scrollTop() < 400 && $("#poll_div").css('position') == 'fixed'){
            $("#poll_div").css({'position': 'static'});
        }
    });
});

If I place the line window.alert("Hello"); instead of the css property change in JQuery, it works fine but not this css property line.

you should just add a class and remove it when you reach those positions then it will be easier. Otherwise you want to change the position back to relative rather than static, otherwise your fixed positioning will only work on first scroll — Pete
– Pete, Commented Jul 8, 2015 at 12:20

Mateutek · Accepted Answer · 2015-07-08 12:25:11Z

1

You have an error in your jQuery

$(document).ready(function(){

$(window).scroll(function(){
    if($(this).scrollTop() > 280 && $("#poll-div").css('position') == 'relative'){
        $("#poll-div").css("position", "fixed");
    }

    if($(this).scrollTop() < 400 && $("#poll-div").css('position') == 'fixed'){
        $("#poll-div").css({'position': 'static'});
    }
});
});

Check your id in html

<div class="col span_1_of_2 poll_div" id="poll-div">

You can simplify it to this

$(window).scroll(function(){
    if($(this).scrollTop() > 280 && $(this).scrollTop() < 400){
        $("#poll-div").css("position", "fixed");
    }else{
       $("#poll-div").css("position", "static");
    }
});

answered Jul 8, 2015 at 12:25

Mateutek

1848 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user4435781 Over a year ago

Thanks for the response. That seems a nice solution. But actually the problem was with its position in the css :)

Rino Raj · Accepted Answer · 2015-07-08 12:35:55Z

0

Add Position fixed

You can add position:fixed; in you style and accomplish your need

.poll_div{
    background-color: white;
    position: fixed;//removed position relative
    width: 25%;
    float: right;
    margin-right: 2%;
    margin-top: 3.5%;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 2px 2px #ccc;
    padding-bottom: 30px;    
}

Example

Updated Demo

edited Jul 8, 2015 at 12:35

answered Jul 8, 2015 at 12:14

Rino Raj

6,2622 gold badges29 silver badges44 bronze badges

4 Comments

user4435781 Over a year ago

I tried it but it remains sticked to the right corner and when I scroll down it scrolls with it like a fixed navbar

Rino Raj Over a year ago

@AhmedDhanani I have added a "DEMO" with your code. Is that fine? verify.

user4435781 Over a year ago

Thanks alot for your response. I checked your demo, but that does not works fine at my end. I have edited the question with the edited css.

user4435781 Over a year ago

Actually that worked. It was a little bit of problem with some other div. Thanks!

Collectives™ on Stack Overflow

jQuery .css property not working on scroll function

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related