As the browser window size decreases, the layout changes. However, when scrolling down, the search text box moves up and is no longer visible due to its lack of fixation. How can I make the search text box stay fixed as I scroll down? I tried implementing code from another example but it doesn't work with my new code. I am working on integrating the data tables search box but cannot figure out what's wrong in my code.
$(function() {
var search = $('.dataTables_filter').detach();
$('.page-title').before(search);
search.css('margin-left','0');
var div = $('.dataTables_filter');
var start = $(div).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position', ((p) > start) ? 'fixed' : 'static');
$(div).css('top', ((p) > start) ? '0px' : '');
});
});