0

I use scrollToFixed.js for scroll my div with fix postion .but I want to when I see the page in mobile device I remove position fix when I scroll to bottom of page.how I can do it?I write some code but it does not work correctly.

      <div class="header" style='height:50px;border:1px solid;'></div>
       <div class="container-fluid">
        <div class="row">
               <div class="col-md-3 col-sm-4">
                <div class="profileRight" style='height:550px;border:1px solid;'>
                    name:Jack
                </div>
            </div>
               <div class="col-md-9 col-sm-8 profile-info">
                      <div style='height:1550px;border:1px solid;'>
                content</div>
                        </div>
            </div>    
          </div> 


       $( '.profileRight' ).scrollToFixed( {
    marginTop: $( '.header' ).outerHeight(),
    limit: function () {
        var limit = $( '.footer' ).offset().top-480;
        return limit;
    }

} );
$( document ).scroll( function () {
    var winWidth = $( window ).width();
    if ( winWidth < 767 ) {
        $( '.profileRight' ).css( "position", "static" );
    }
} );
elhamb
  • 91
  • 7

2 Answers2

0

You can use css instead of js, like:

  @media only screen and (max-width: 767px) {
  .profileRight{
   position: static;
   }
  }
soroush
  • 502
  • 3
  • 7
  • I use scrollToFixed.js plugin and it does not work correctly with this css code.and scrollToFixed.js create alot of div and when I set static postion its not enough – elhamb Jun 23 '19 at 09:09
0

Well the first question is what metric you want to use to target what you call "mobile". If like in your code, and the previous commenter suggests, you are fine with "mobile" meaning simply a narrower browser window than 767px, even if the user is on a desktop computer, then a media query will do the trick, but keep in mind there are other methods of checking to see if the browser is actually mobile/touch, see What is the best way to detect a mobile device?.

For your case with scrollToFixed.js, the issue is that the plugin adds the position:fixed style "inline" on the element, so in order for a media query to have more specificity, you would sadly have to use an !important flag in the declaration matched by the media query.

@media only screen and (max-width: 767px) {
  .profileRight{
     position: static !important;
  }
}
jonjohnjohnson
  • 126
  • 2
  • 6